コーディング

【css3】フォームのカスタマイズで
テキストボックスがはみ出るときは。

コーディングのとき、知っておくとちょっと便利なcssコード。

webを作っていると、inputなどのフォームをデフォルトから変更する機会がけっこうあります。

 

が、なぜかテキストボックスだけ、指定した幅、高さにならないことがあります。

原因は、テキストボックスなどはブラウザによって自動的にmarginやpaddingが入るため。

box

これを解消するために、cssで「box-sizing:border-box」を指定します。

これで、marginやpaddingが指定した幅や高さに含まれるので、

余分なはみ出しを解消できると。ベンダープレフィックスを含めた記載方法はこんな感じで。

 

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
2013-12-06 | Posted in WEBLOG, コーディングNo Comments »