8

Safariはに対して奇妙な振る舞いをしbox-shadowます。

input[type="text"]{
    -webkit-box-shadow: 0 0 8px #000000;
    box-shadow: 0 0 8px #000000;
}
input[type="text"]:focus{
    outline: none;
    -webkit-box-shadow: 0 0 8px #ffffff;
    box-shadow: 0 0 8px #ffffff;
}

が表示されますが、box-shadow要素にフォーカスが移るとすぐに影が完全に消えます。：focusに何も設定しない場合も同じ効果があります。

デスクトップ-Safariで動作します。iOS 5ベータ版（iPad）を使用していますが、安定版リリースやその他のデバイスでテストできません。

誰かがこれに対する解決策を持っていますか？

4

1 に答える 1

26

-webkit-appearance：noneを使用して、ネイティブの外観をオーバーライドします。

input[type="text"]{
    -webkit-appearance: none;
    -webkit-box-shadow: 0 0 8px #000000;
    box-shadow: 0 0 8px #000000;
}
于 2011-10-04T20:04:53.143 に答える