Jump to content

plarfox

Neophyte
  • Posts

    1
  • Joined

  • Last visited

Everything posted by plarfox

  1. Здравствуйте, помогите разобраться, делаем кастомные радиобаттоны, скрываем те что по умолчанию, с помощью span рисуем новые (псевдокласс :before для состояния отмеченности), стилизуем поведение в разных состояниях, :hover :focus :checked Проблема в том что после задания стилей для :focus (которые передают обводку со скрытых радиобаттонов) эта обводка отображается не только после использования tab и нажатий с клавиатуры, но и при нажатии мышкой. В общем цель в том что-бы обводка от фокуса появлялась только при манипуляции с клавиатуры, а при нажатии с мыши и разных состояний (:hover :checked) ее не было , для них свои стили P. S. Изучаю пока-что HTML и CSS, надеюсь это можно сделать без Javascript <ul> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="one" name="radio"> <span class="radio-indicator"></span> Радиокнопка 1 </label> </li> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="two" name="radio"> <span class="radio-indicator"></span> Радиокнопка 2 </label> </li> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="three" name="radio"> <span class="radio-indicator"></span> Радиокнопка 3 </label> </li> </ul> .visually-hidden input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); } .filter-option { position: relative; margin-bottom: 25px; padding-left: 38px; } .filter-option label { cursor: pointer; } .radio-indicator { content: ""; position: absolute; top: -3px; left: 0; width: 21px; height: 21px; border: 4px solid #4d4d4d; border-radius: 50%; opacity: 0.5; } .filter-input-radio:checked + .radio-indicator::before { content: ""; position: absolute; top: 7px; left: 7px; width: 8px; height: 8px; background-color: #4d4d4d; border-radius: 50%; opacity: 0.5; } .filter-option:hover, .filter-option:hover .radio-indicator, .filter-option:hover .radio-indicator::before { color: #000000; opacity: 1; } .filter-input-radio:focus + .radio-indicator { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; opacity: 1; } .filter-input-radio:focus + .radio-indicator::before { opacity: 1; }
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy