How to make input and select to be same width in css
Demo Fiddle
You should ideally separate style from content, so in your CSS include:
input, select{
width:100%;
box-sizing:border-box;
}
nb. demo fiddle without box-sizing set
And you need to use box-sizing:border-box
in order for sizing to take into account any browser specific or set margin/padding/borders. Here's a handy read on the subject.
The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
border-box
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode.
jamesxu-e.g.
Updated on July 24, 2022Comments
-
jamesxu-e.g. almost 2 years
In my page, there are several
input
andselect
tags.I use
width:100%;
to define their width, but the width in the browser is not100%
.I used the debug tool in chrome, and found there is also useragent stylesheet styles applied.
How can I make the width 100%?