Chrome / Safari: box-shadow появляется только при вводе текста, если задана граница - PullRequest
Новая
       6

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

17 голосов
/ 20 ноября 2011

У меня проблема с браузерами WebKit (Chrome 15.0.x и Safari 5.1.1), где тени от текстовых полей не отображаются при вводе текста. Случайно я обнаружил, что явная установка границы вызывает рендеринг тени блока, даже если для границы установлено значение «none» или значение по умолчанию «inset». Приведенный ниже код (просмотрите его в действии на 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 Ответ

23 голосов
/ 20 ноября 2011

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, вы все равно можете попытаться стилировать нативный внешний вид.

...