Круглая граница появляется после нажатия кнопки

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать рамку вокруг кнопки круга после нажатия, но граница представляет собой округленный квадрат вместо круга.

 .dot {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  border: none;
}

.dot:after {
  border: solid 1px #232323;
  border-radius: 50%;
}

 <button class="dot" style="background-color: #cc6c6c;"></button>

1. :after не делает того, что вы думаете (это влияет на псевдоэлемент) Черный контур, который вы видите, — это контур, который применяется как часть стиля фокусировки в Chrome, а не граница.

2. :after это CSS2, вам действительно нужно использовать ::after , который указан как pesudoelement для CSS3. Однако это ничего не меняет после нажатия кнопки. Он используется для добавления somethign после этого элемента. Если у вас есть кнопка в качестве ссылки, :visited вы можете использовать :focus или использовать JS с событием onclick для изменения стиля.

Ответ №1:

Вы должны использовать :focus селектор вместо :after , и вам нужно скрыть свойство по умолчанию outline , чтобы сделать ваш альтернативный стиль фокусировки (с использованием рамки) видимым.

(Вам также не нужно повторно устанавливать border-radius свойство, поскольку оно не изменилось)

Чтобы кнопка не прыгала при фокусировке, вы можете использовать прозрачную рамку для вашего первоначального стиля кнопки, см. Комментарий CSS в примере.

 .dot {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  /* 
    Using an transparent border, rather than no border,
    will prevent the focus style from causing the button to 
    jump down by the border thickness (1px in this case) 
  */
  border: solid 1px rgba(0,0,0,0);
}

.dot:focus {
  border-color: #232323;
  outline: none;
}

 <button class="dot" style="background-color: #cc6c6c;"></button>

1. Это предпочтительнее других подходов, outline поскольку оно заменяет другое focus поведение, которое с большей вероятностью соответствует требованиям WCAG . Однако убедитесь, что focus -state достаточно виден / очевиден.

2. Спасибо, но я замечаю, что при нажатии кнопки позиция немного сместится вниз, как мне этого избежать?

3. Самый простой способ — придать кнопке невидимую границу, когда она не сфокусирована, чтобы при добавлении новой границы высота не менялась. Я расширю свой ответ.