Jump to content
  • 0

Кастомный радиобаттон Как правильно задать :hover и :focus?


plarfox
 Share

Question

Здравствуйте, помогите разобраться, делаем кастомные радиобаттоны, скрываем те что по умолчанию, с помощью 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;
}

 

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By qqruz
      Мне нужен код для автоматической публикация последних видео с нескольких каналов ютюб, что бы они шли последовательно. Я перерыл весь интернет и нечего не нашел, сам тоже пытался написать, но из-за слабого знания языка и малого количества видео не могу. Надеюсь на чью-то поддержку.
    • By fooxy96
      Здравствуйте! Нужна помощь хорошо разбирающихся людей в верстке. Написал часть сайта (html, css) адаптив. На сайте только шапка, поисковая форма, вход и корзина.
      Подскажите, что я сделал не правильно в коде.
      Какими способами можно реализвать форму поиска с кнопкой, вход, и корзину. Я понимаю что много ошибок, хоть код и не большой.
      Буду благодарен за любой отзыв и разбор.
      Спасибо!!!
      ссылка на сайт — u1071267.isp.regruhosting.ru
    • By FotGOD
      Здравствуйте. Верстаю макет, но чтото не так. Подобные верстал раньше, все было хорошо, даже сверяю, все чуть ли не под копирку написал. Но в Этом коде почему-то строки в меню слиплись и не могу их раскинуть. на рисунке как должно быть, и как выходит. Что не так делаю?
       Html:
      <div class="container"> <header class="header"> <div class="header-item"> <a href="#"><h1 class="logo">Bouncy</h1></a> <nav class="navbar"> <ul class="menu"> <li><a href="#">Hello</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Portfolio</a> </li> <li><a href="#">Team</a> </li> <li><a href="#">Blog</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> </div> </header> </div>  Css:
      .header { width: 1366px; height: 737px; background: url(../i/header.jpg) no-repeat; } .header a { text-decoration: none; } .container { width: 1366px; margin: auto; } .header-item { display: flex; flex-wrap: wrap; justify-content: space-around; } .logo { text-transform: uppercase; color: #ffffff; } .navbar { margin-top: 16px; } .menu { display: flex; justify-content: flex-end; list-style: none; } .menu a { color: #ffffff; }  


    • By turre
      Здравствуйте.
      Помогите с Html и css
      Сам я начинающий и пока только учусь.
      Есть index.html к нему style.css получается криво, а надо одинаковые строчки.
      Спасибо.
      P.S. буду признателен если подскажите как сделать что бы текст был строго по центу.
      index.html
      style.css

    • By Odinokiy_volk
      Привет! Подскажите как наложить нижнее синее облако поверх формы что справа.. 
      Пробовал позиционировать этот фон относительно body и  других контейнеров, мало того что не получилось расположить поверх формы так он ещё и обрезается, а он должен быть резиновым.. Пробовал поставить z-index выше относительно самой формы, body, а также других элементов но также ничего не вышло.. Пробовал эксперименты с opacity - тоже не помогает..
      Для элементов формы применяется абсолютное позиционирование, видимо это не дает вытащить синий фон поверх нее, но должно же быть решение

×
×
  • 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