MogLog

メモというか日記というか備忘録というか

Google Chromeのinput要素にborder-radiusをつけると現れる影を消す方法

結論

適当なborderをつけると消える

動作環境

タイトル通り、Google Chromeのinput要素(type属性はtext)にborder-radiusをつけると謎の影のようなものが現れたのでこれを消す方法について。

これが普通の状態のinput要素。
よく見るとすでに影っぽいものが上部に見えるな...。

f:id:mogulla3:20140208185332p:plain

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

f:id:mogulla3:20140208185406p:plain

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

f:id:mogulla3:20140208185406p:plain

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

f:id:mogulla3:20140208190042p:plain

枠線の色は若干変わってしまったが、元々変えるつもりだったし、OK。