h3pei.tech
お仕事のご依頼
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 要素。
よく見るとすでに影っぽいものが上部に見えるな…。 2014-02-08-01.png

これに「border-radius: 5px」をつけるとこうなる。 2014-02-08-02.png

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

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

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

h3pei's icon

h3pei

フリーランスのソフトウェアエンジニア。Ruby / Rails アプリケーションの開発が得意領域。設計・実装・運用まで含めてプロダクト開発が好きです。

Questalという目標達成コミュニティサービスを開発しました。仲間と一緒に目標達成に取り組みたい方はぜひご利用ください。

お仕事のご依頼
GitHubnoteX

関連記事