it-roy-ru.com

Как сбросить / убрать подсветку входа / границу фокуса?

Я видел, что chrome помещает более толстую границу в :focus, но это как-то не так в моем случае, где я также использовал border-radius. Есть ли способ удалить это?

image: chrome :focus border

334
Jiew Meng

Вы должны быть в состоянии удалить его, используя

outline: none;

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

661
Pekka 웃

Мне пришлось сделать все следующее, чтобы полностью удалить его

outline-style:none;
box-shadow:none;
border-color:transparent;
108
George

Чтобы удалить фокус по умолчанию, используйте следующее в вашем файле .css по умолчанию:

:focus {outline:none;}

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

:focus {outline:none;border:1px solid red}

Очевидно, замените red выбранным вами шестнадцатеричным кодом.

Вы также можете оставить границу нетронутой и контролировать цвет фона (или изображение), чтобы выделить поле:

:focus {outline:none;background-color:red}

:-)

78
Meditation Room

Это определенно будет работать. Оранжевый контур больше не будет отображаться .. Общий для всех тегов:

*:focus {
    outline: none;
   }

Определенный для некоторого признака, например: входной признак

input:focus{
   outline:none;
  }
20
Prashant Gupta
border:0;
outline:none;
box-shadow:none;

Это должно сделать свое дело.

16
noelietrex

Самый простой способ - использовать что-то подобное, но учтите, что это может быть не так хорошо.

input {
  outline: none;
}

Я надеюсь, что вы найдете это полезным.

7
miksiii

вы можете просто установить outline: none; и границу другого цвета в фокусе.

5
asawilliams

Проблема в том, когда у вас уже есть план. Chrome все еще что-то меняет, и это настоящая боль. Я не могу найти, что изменить:

.search input {
  outline: .5em solid black;
  width:41%;
  background-color:white;
  border:none;
  font-size:1.4em;
  padding: 0 0.5em 0 0.5em;
  border-radius:3px;
  margin:0;
  height:2em;
}

.search input:focus, .search input:hover {
  outline: .5em solid black !important;
  box-shadow:none;
  border-color:transparent;;
 }

.search button {
  border:none;
  outline: .5em solid black;
  color:white;
  font-size:1.4em;
  padding: 0 0.9em 0 0.9em;
  border-radius: 3px;
  margin:0;
  height:2em;
  background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
  background: -webkit-linear-gradient(#4EB4F8, #4198DE);
  background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
  background: -ms-linear-gradient(#4EB4F8, #4198DE);
  background: -o-linear-gradient(#4EB4F8, #4198DE);
  background: linear-gradient(#4EB4F8, #4198DE);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
  zoom: 1;
}

No focusWith focus

5
Alain Zelink