2014-02-08
Google Chromeのinput要素にborder-radiusをつけると現れる影を消す方法
結論
適当な border をつけると消える
記録
動作環境
- MacOS X 10.7.5
- Google Chrome バージョン 31.0.1650.63
タイトル通り、Google Chrome の input 要素(type 属性は text)に border-radius をつけると謎の影のようなものが現れたのでこれを消す方法について。
これが普通の状態の input 要素。
よく見るとすでに影っぽいものが上部に見えるな…。

これに「border-radius: 5px」をつけるとこうなる。

調べたところ、「-webkit-appearance: none」をつけると解除できるとか。やってみる。

なにも変わらんぞ…。
適当なプロパティをつけて検証していたところ、border プロパティをセットすると消えることが判明した。下の画像は「border: 1px solid #ccc」をつけたもの。

枠線の色は若干変わってしまったが、元々変えるつもりだったし、OK。
h3pei
関連記事
<< 前の記事HTTPリファラについて