Удалить внутреннюю тень ввода текста

Итак, у меня есть текстовый ввод, im, использующий html5, на chrome, и я хочу изменить внешний вид текстового ввода, я удалил контур фокуса (оранжевый на хром), я установил фон на свет цвет #f1f1f1, но теперь есть как более толстая граница на верхней и левой сторонах, как будто это означало, что смотреть вдавлено, когда нет изменения цвета фона, этого не происходит. Как его удалить? Извините, я не могу представить картинку на мобильном устройстве.

Это происходит на хроме, т.е. и Firefox, не может проверять другие.

+54
источник поделиться
7 ответов

border-style:solid; переопределит стиль inset. Это то, что вы просили.

border:none будет удалять границу вместе.

border-width:1px установит его таким же, как перед изменением фона.

border:1px solid #cccccc более конкретно и применяется все три, ширина, стиль и цвет.

Пример: https://jsbin.com/quleh/2/edit?html,output

+100
источник

Это решение для мобильного сафари:

-webkit-appearance: none;

как предлагается здесь: Удалить внутреннюю тень в области рекламы на Mobile Safari (iPhone)

+26
источник

Ни одно из решений не работает в настоящее время. Вот мое решение. Вы можете добавить префиксы.

box-shadow: inset 0px 0px 0px 0px red;
+20
источник

Добавьте border: none или border: 0, чтобы удалить границу вообще, или border: 1px solid #ccc, чтобы сделать границу тонкой и плоской.

Чтобы удалить добавление призраков в Firefox, вы можете использовать ::-moz-focus-inner:

::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Смотрите живую демонстрацию.

+17
источник

Установите border: 1px solid black, чтобы все стороны равны и удалили любую специальную границу (отличную от сплошной). Кроме того, установите box-shadow: none, чтобы удалить любую тень, прикрепленную к ней.

+10
источник

Попробуй это
outline: none;

живая демоверсия https://codepen.io/wenpingguo/pen/KQgbXq

+1
источник

Я работаю над firefox. и у меня была такая же проблема, текст типа ввода определяется автоматически, что-то похоже на вставку boxshadow, но это не так. вы хотите изменить границу... просто установите border:0;, и все готово.

-1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос