Chrome/Safari: тень окна появляется только при вводе текста, если указан граница

У меня проблема с браузерами WebKit (Chrome 15.0.x и Safari 5.1.1), где тени теней не отображаются на текстовых вводах. Просто случайно я обнаружил, что явная настройка границы вызывает визуализацию теневого окна, даже если вы установите границу как "нет" или по умолчанию "вставка". Код ниже (просмотреть его в действии на JSFiddle) продемонстрировал проблему при просмотре с помощью Chrome или Safari, но он отображает, как ожидалось, в Firefox 6.0.2 и Opera 11.52.

HTML

<input type="text" value="Works" style="border:none;" />
<input type="text" value="Works" style="border:inset;" />
<input type="text" value="Doesn't" />

CSS

input[type="text"] {
    margin: 1em;

    -webkit-box-shadow: 0px 0px 2px 1px green;
    box-shadow: 0px 0px 2px 1px green;
}

Мне не хватает некоторых деталей использования теней ящика в WebKit или я обнаружил ошибку?

Ответы

Ответ 1

input s, в WebKit, это свойство применяется к ним по умолчанию:

-webkit-appearance: textfield;

Это то, что вы хотите, если хотите, чтобы текстовое поле выглядело как зависящее от платформы. Иногда вы можете стилизовать его с помощью этого набора, но в других случаях его необходимо установить в none, что делает его применимым к стандартным CSS и меньше полагается на операционную систему. Кажется, что border автоматически запускает это, но box-shadow не работает, но box-shadow применяется, если -webkit-appearance есть none. (тот факт, что зависящий от платформы внешний вид не отключается, если применяется box-shadow и что box-shadow не отображается, если включен зависящий от платформы внешний вид может быть ошибкой)

Чтобы исправить это, просто явным образом скажу, чтобы он не использовал зависящий от платформы внешний вид:

input[type="text"] {
    -webkit-appearance: none;
}

Проверить его с добавлением -webkit-appearance: none;.

Недостатком этого является то, что вы теряете (некоторые из) внешний вид платформы, но если вы пытаетесь использовать box-shadow, вы можете в любом случае отформатировать внешний вид.