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

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

это происходит на chrome, ie, и Firefox, не может проверить никаких других.

7 53
html input

7 ответов:

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

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

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

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

пример:https://jsbin.com/quleh/2/edit?html, выход

94

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

- webkit-внешний вид: нет;

Как предложено здесь: удалить внутреннюю тень textarea на мобильном Safari (iPhone)

25

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

box-shadow: inset 0px 0px 0px 0px red;
19

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

чтобы удалить ghost padding в Firefox, вы можете использовать ::-moz-focus-inner:

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

посмотреть демо.

17

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

10

попробуй такое
outline: none;

live demo https://codepen.io/wenpingguo/pen/KQgbXq

1

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

-1