input , select 크기 맞추기

A solution?

Then we discovered this:


.form-text {
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
}

Combining the two sets of CSS above results in form elements that look like this:



Depending on your choice of browser, there’s a good chance the two elements above are now the same width.

What is the “box-sizing” property?

An explanation of the “box-sizing” property from the W3Schools website is as follows:

“The box-sizing property allows you to define certain elements to fit an area in a certain way. For example, if you’d like two bordered boxes side by side, it can be achieved through setting box-sizing to ‘border-box’. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.”

This “fix” appears to work in Internet Explorer 8 and above, Firefox, Safari and Chrome. Without it, we could never find a way of making the elements the same width even with specific width, padding, margin and border properties.

input, textarea 적용