CSS: how to set the width of form control so they all have the same width?
Posted
by Alessandro Vernet
on Stack Overflow
See other posts from Stack Overflow
or by Alessandro Vernet
Published on 2010-05-22T00:20:28Z
Indexed on
2010/05/22
0:30 UTC
Read the original article
Hit count: 280
Consider the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
div { width: 15em }
input, textarea, select { width: 100%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
</style>
</head>
<body>
<form>
<div>
<input value="Input">
</div>
<div>
<textarea>Text area</textarea>
</div>
<div>
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
</form>
</body>
</html>
On browser that support the border-box box sizing, this is rendered as I want:
On IE 6/7, however, this is rendered as:
How can I get the same rendering in IE 6/7 that I get in other browsers, without resorting to setting sizes in pixels?
© Stack Overflow or respective owner
