Есть ли способ изменить цвет кольца-webkit-focus-ring?

Как изменить цвет -webkit-focus-ring-color? Chrome имеет светло-голубой цвет, который конфликтует с моим CSS, я хотел бы изменить его на другой цвет hex, но сохранить остальную часть стиля (выцветший край, ширина) то же самое.

кроме того, есть важная причина-это плохая идея? Спасибо?

6
colors css focus webkit

3 ответов

следующий css должен сделать для Chrome (изменение только цвета контура):

.thing:focus {
  outline-color: [MY_COLOUR];
}

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

Если вы довольны стилем фокусировки браузера и просто хотите изменить цвет, это должно быть сделано. Вы также можете сделать некоторые быстрые исследования, чтобы увидеть, что стиль фокуса по умолчанию для других браузеров (возможно некоторые используют границу?), а также тех цветах.

Если вы хотите эмулировать стиль chrome во всех браузерах, попробуйте следующее (Из таблицы стилей Chrome user-agent):

.thing:focus {
  outline: [My_COLOUR] auto 5px;
}
5

http://jsfiddle.net/jmysiak/fpqp1zv3/2/

input {
  border: 1px solid #c4c4c4;
  width: 200px;
  height: 20px;
  font-size: 16px;
  padding: 4px;
  border-radius: 2px;
    -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
  transition: all ease-in-out 0.15s;
    -webkit-transition: all ease-in-out 0.15s;
      -o-transition: all ease-in-out 0.15s;}

input:focus { 
  outline: none;
  border-color: #df9eed;
  box-shadow: 0 0 10px #df9eed;}
3

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

скрипка

HTML-код

<button class="thing">Something</button>

или

<input class="thing" type="text" />



в CSS

.thing {
    border: 1px solid red;
}

.thing:focus {
    outline: 0;    
    border: 1px solid blue;
}
0