Почему кнопка по умолчанию переопределяет контур на событии фокуса?

Ответ 1

Возможно, неправильно.

• Кнопка по умолчанию (в Google Chrome по крайней мере) использует appearance атрибут стиля:

  button {
      -webkit-appearance: button;
  } 
  

  Свойство appearance позволяет вам сделать элементы похожими на стандартный элемент пользовательского интерфейса из вашей операционной системы. Говоря об OS X, стандартные кнопки интерфейса не имеют контура по умолчанию.

  Очень простой способ проверить, как выглядят стандартные кнопки os:

  alert('I am standard button')

  Когда вы создали псевдо-класс button:focus, который содержал background или border (пример # 2), вы переопределили стандартного внешнего вида с помощью стиля браузера по умолчанию для кнопки + правила.

  В примере # 1 button:focus пуст, и, по-видимому, он просто игнорируется браузером, поэтому применяется стиль интерфейса os.

  Если вы создадите стиль:

  button { -webkit-appearance: initial; }
  

  вы получите кнопку браузера по умолчанию, имеющую схему.

• Стиль по умолчанию для Chrome по умолчанию имеет правило:

  background-color: buttonface;
  

  Safari и Google Chrome поддерживают пользовательские имена цветов, которые ссылки на используемые в настоящее время цвета элементов пользовательского интерфейса. Это может быть так, что buttonface '#dddddd' в вашей системе. Интересно, хотя, как я вижу синий контур в OS X Chrome.

Для вопросов 3 и 4, я боюсь, что не могу воспроизвести его, поскольку я нахожу контуры.

Будет обновлен ответ после некоторых исследований. Ура!:)

Ответ 2

webkit Chrome и Safari ведут себя по-другому, поскольку они не запускают :focus в событии клика, а делают это при событии клавиатуры tab.

Это поведение :focus присутствует, особенно в элементе button.

Таким образом, вам может потребоваться добавить атрибут tabindex в ваш элемент button, чтобы браузер знал, что этот элемент может получить фокус.

tabindex="0"  

Поскольку без этого атрибута tabindex браузер видит флаг фокуса как ложный, следовательно нет :focus.

См. спецификацию W3C:

https://drafts.csswg.org/selectors-3/#the-user-action-pseudo-classes-hover-act

Может существовать язык документа или конкретные ограничения реализации, по которым элементы могут стать: активными или приобретающими: фокус.

Также см. следующее относительно сфокусированного контекста просмотра

https://html.spec.whatwg.org/multipage/interaction.html#currently-focused-area-of-a-top-level-browsing-context

Если атрибут опущен или разбор значения возвращает ошибку.

Пользовательский агент должен следовать соглашениям платформы, чтобы определить, установлен ли флаг фокусировки tabindex элемента, и если да, то может ли быть достигнут элемент и любые фокусируемые области, у которых есть элемент в качестве их привязки DOM, используя последовательную навигацию по фокусу, и если так, каково их относительное положение в порядке навигации последовательной фокусировки.

Согласование платформы Modulo, предлагается, чтобы для следующих элементов был установлен флаг фокуса tabindex:

• элементы, имеющие атрибут href

• элементы ссылок, которые имеют атрибут href

• Элементы кнопки

Вы также можете увидеть этот связанный вопрос StackOverflow:

css фокус не работает в сафари и хром

Ответ 3

имеет стиль по умолчанию для каждого браузера. он может (и часто) отличаться от браузера к браузеру. Но мы можем перезаписать значения по умолчанию в соответствии с нашими потребностями.

Почему схема не отображается на кнопке по умолчанию при нажатии на нее?

Кнопка не входит в состояние фокусировки при нажатии. Он переходит в активное состояние.

Почему с фоном: #ddd также не отображается?

Он отображается в моем браузере, но только в фокусе. В ваших примерах вы используете #ddd и #dde, у которых есть очень похожие серые серые по умолчанию, но как только я изменил значение, я мог видеть разницу.

Почему отображается контур, когда вы используете вкладку, а не когда вы нажимаете кнопку (в двух случаях выше)?

Состояние фокусировки призвано позволить пользователю нажать клавишу Enter/Return, чтобы активировать кнопку. Однако кнопка не входит в состояние фокусировки, на которое она нажата.

Почему кнопка имеет контур в своем CSS, но не отображает его? Это ошибка?

Это не ошибка. Он отображается только в состоянии фокусировки, которое может быть принудительно передано через инспектор кода, через javascript или путем табуляции через элементы формы. Я использовал свой собственный пример:   схема: 2px solid #ccc; Состояние фокусировки очень полезно при попытке сделать приложение/веб-сайт доступным для чтения с экрана для людей с ослабленным зрением. Это позволяет нам добавлять больше функций, которые могут быть запущены в этих ситуациях, и ориентировать пользователя на страницу, когда смотреть на нее невозможно.

Ответ 4

Это просто предположение, поскольку у меня нет ресурсов для отладки Webcore.

Да, я считаю, что это поведение является ошибкой. Я не думаю, что Webkit намерен сфокусировать кнопку на клике, но только устанавливает состояние фокусировки, когда он выбирается с помощью вкладки. Теперь ошибка состоит в том, что она действительно фокусируется при изменении фона. Это может иметь какое-то отношение к setStyle() веб-сайта, где он перезаписывает style.appearance (который используется для проверки проверки поддержки focus-ring-color).

Теперь почему это не работает при выполнении background-color: #DDD?

Как вы уже сказали, это тот же цвет, что и исходный цвет. Они, вероятно, являются одним и тем же типом цветового объекта и идентичны.

Я считаю, что Webkit не устанавливает стиль, если он не добавляет ничего нового в стиль.

Вы можете протестировать это, добавив строку, которая не имеет стиля по умолчанию для кнопки рендеринга:

button:focus {
  background-color: #DDD;
  border: 1px solid transparent;
}

<button>
  Focus me!
</button>

Ответ 5

Поведение браузера по умолчанию заключается в том, чтобы показывать контур только по фокусу (используя вкладку f.e.), а не по щелчку. Каждый браузер также может иметь по умолчанию цвет и ширину. Чтобы избежать смешного поведения, вы можете перезаписать контур, а также добавить его к клику:

#buttontag:focus, #buttontag:active {
  outline: #ddd solid 2px;
}