HOME > html-css > safariでinputフィールドの角丸を無効

safariでinputフィールドの角丸を無効

inputフィールドへの、border 等のCSSが、safariのみ反映されない。ちょっと悩んだが、解決方法はごく単純で、webkit を切るのみ。

input[type="text"] {
    -webkit-appearance: none;
}
参考 http://d.hatena.ne.jp/zhuweichen/20130626/1372234580

なお、通常、inputフィールドをfocusするとwebkitのボーダーが表示されるが、これを切るためには、下記を記述する。

input[type="text"]:focus {
    outline: none;
}
参考 http://www.electrictoolbox.com/remove-webkit-border-input-focus/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>