Удалить внутреннюю тень ввода текста
Итак, у меня есть текстовый ввод, im, использующий html5, на chrome, и я хочу изменить внешний вид текстового ввода, я удалил контур фокуса (оранжевый на хром), я установил фон на свет цвет #f1f1f1
, но теперь есть как более толстая граница на верхней и левой сторонах, как будто это означало, что смотреть вдавлено, когда нет изменения цвета фона, этого не происходит. Как его удалить? Извините, я не могу представить картинку на мобильном устройстве.
Это происходит на хроме, т.е. и Firefox, не может проверять другие.
border-style:solid;
переопределит стиль inset
. Это то, что вы просили.
border:none
будет удалять границу вместе.
border-width:1px
установит его таким же, как перед изменением фона.
border:1px solid #cccccc
более конкретно и применяется все три, ширина, стиль и цвет.
Это решение для мобильного сафари:
-webkit-appearance: none;
как предлагается здесь: Удалить внутреннюю тень в области рекламы на Mobile Safari (iPhone)
Ни одно из решений не работает в настоящее время. Вот мое решение. Вы можете добавить префиксы.
box-shadow: inset 0px 0px 0px 0px red;
Добавьте border: none
или border: 0
, чтобы удалить границу вообще, или border: 1px solid #ccc
, чтобы сделать границу тонкой и плоской.
Чтобы удалить добавление призраков в Firefox, вы можете использовать ::-moz-focus-inner
:
::-moz-focus-inner {
border: 0;
padding: 0;
}
Смотрите живую демонстрацию.
Установите border: 1px solid black
, чтобы все стороны равны и удалили любую специальную границу (отличную от сплошной).
Кроме того, установите box-shadow: none
, чтобы удалить любую тень, прикрепленную к ней.
Попробуй это outline: none;
живая демоверсия https://codepen.io/wenpingguo/pen/KQgbXq
Я работаю над firefox. и у меня была такая же проблема, текст типа ввода определяется автоматически, что-то похоже на вставку boxshadow, но это не так.
вы хотите изменить границу... просто установите border:0;
, и все готово.
Посмотрите другие вопросы по меткам html input css css3 или Задайте вопрос