<select> element is a bit shorter then rest
So I've set my input, textarea and select elemtnts width开发者_如何学编程 of 97%. Everything is showing fine, but select element is always a bit shorter then rest. See picture for screenshot.
How to fix this? :)
Okey I fixed it byt adding extra margin to select element, here is css.
#cat_add_form input[type="text"], #edtCatDescr, select, .fileUpload
{
background-color: #ffffff;
width: 97%;
padding: 4px;
margin-bottom: 6px;
font-size: 16px;
border: 1px solid #dfdfdf;
display: block;
/* CSS 3 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
#cat_add_form select
{
margin-left: 10px;
}
Use box-sizing: border-box
.
This works in modern browsers, and IE8+.
Live Demo (or 97% version), modified from @Myles Gray's demo.
See here for more details.
For a way that works in IE7, see here.
select {
width:98%;
}
Just play with values until it looks alright,
Demo
What browsers have you tested in?
精彩评论