CODEWITHSUNDEEP
htmlcssselectinputtags
jamesxu-e.g.
jamesxu-e.g.

Reputation: 650

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%?

Upvotes: 10

Views: 16754

Answers (4)

YVbakker
YVbakker

Reputation: 130

or use the following css:

input[type=text], select { 
    width: 100% //or whatever you want)
}

Upvotes: -1

SW4
SW4

Reputation: 71140

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.

Upvotes: 26

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

To override the user agent stylesheet use reset.css in your code at the start.

   /* 
      Reset .css
   */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

If you do not want to override the useragent then you can go for width value in 'px'

Upvotes: 0

AKS
AKS

Reputation: 1279

Try to use the width CSS property of select tag as follows:

<Select name="foo" width="100" style="width: 100px">
 <option>One</option>
 <option>Two</option>
 <option>Three</option>
 <option>Four</option>
</select>

So the same for the input tag 

<input type="text" name="faa" value="test" style="width: 100px;" />

You can use the style in css as well for input tag.

Upvotes: -2

Related Questions