Как удалить стиль хром по умолчанию для выбора Input?

Как удалить границу желтого окна по умолчанию выбранного входа и выбрать поля в хроме или любом браузере, например сафари? Я хочу настроить ввод с помощью пользовательского поля shadow css. Как удалить границу выбора браузера по умолчанию?

Ответ 1

-webkit-appearance: none;

и добавьте свой собственный стиль

Ответ 2

textarea, input { outline: none; }

через fooobar.com/questions/25652/...

Ответ 3

Микшин для менее

.appearance (@value: none) {
    -webkit-appearance:     @value;
    -moz-appearance:        @value;
    -ms-appearance:         @value;
    -o-appearance:          @value;
    appearance:             @value;
}

Ответ 4

В своем CSS добавьте это:

input {-webkit-appearance: none; box-shadow: none !important; }
:-webkit-autofill { color: #fff !important; }

Только для Chrome!:)

Ответ 5

использовать простой код для удаления стиля браузера по умолчанию для контура

input { outline: none; }

Ответ 6

input: -webkit-autofill { background: #fff! important; }

Ответ 7

При просмотре ввода с типом числа вы заметите вращающиеся кнопки (вверх/вниз) в правой части поля ввода. Эти блесны не всегда желательны, поэтому приведенный ниже код удаляет такие стили, чтобы визуализировать ввод, который похож на ввод с типом текста.

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

Ответ 8

Вы говорите, когда вы нажимаете на поле ввода, а не просто наводите на него курсор? Это исправило это для меня:

input:focus {
   outline: none;
   border: specify yours;
}

Ответ 9

Перед применением свойства box-shadow: нет

После применения свойства box-shadow: нет

Это самое простое решение, и оно сработало для меня

input {
   box-shadow : none;  
}