[HTML]處理100%闊同時有padding的input和textarea

在HTML中,如果文字框text input field──像或者等等──本身已經有左右padding設定的話,當width=100%時,文字框的長度就會比100%大。

像這樣:

input-without-box-sizing

不爽吧?

這裡就有解決方法:

如果IE6和IE7不在考慮之列,可用CSS3中的對付。

然而,除了Opera和IE8+以外,box-sizing仍未有被「真正」納入Firefox和Webkit的對應CSS內,所以使用時仍然要同時寫上browser-specific的CSS declaration:

input, textarea {
	width: 100%
        padding: 4px;
        box-sizing: border-box; /* Opera/IE 8+ */
        -webkit-box-sizing: border-box; /* Webkit */
	-moz-box-sizing: border-box; /* Firefox */
}

整容後會變成這樣:

input-with-box-sizing

注意,如使用box-sizing的話,文字框的height將不受控制,應改用文字的line-height和天地padding來取代。

來源:
http://www.siteart.co.uk/full-width-100-inputs-textareas-with-padding
https://developer.mozilla.org/en-US/docs/CSS/box-sizing