Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make input and select to be same width in css

In my page, there are several input and select tags.

I use width:100%; to define their width, but the width in the browser is not 100%.

I used the debug tool in chrome, and found there is also useragent stylesheet styles applied.

How can I make the width 100%?

like image 589
jamesxu-e.g. Avatar asked Mar 26 '14 08:03

jamesxu-e.g.


People also ask

How do I make input width fit content?

Use the span. text to fit width of text, and let the input have same size with it by position: absolute to the container.

How do you write input type to width?

This can be done by using the size attribute or by width attribute to set the width of an element. The size attribute works with the following input types: text, search, tel, url, email, and password and not on type date, image, time for these we can use width attribute. Create a div in which we are putting our input.


1 Answers

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.

Box-Sizing on MDN:

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.

like image 84
SW4 Avatar answered Oct 03 '22 18:10

SW4