Mostefai Mohammed Amine's Blog

Say That I Was Here !

Adjust control widths using CSS

One of the most important issues when designing websites is to adjust the width of the different controls and especially text boxes and drop down lists. When using CSS rules that integrate a fixed width, there’s still a small width difference between text controls and drop down lists. The key is that selects and inputs use by default different box sizing mechanisms. Fortunately, CSS3 comes with the box-sizing rule that allows to apply the same box sizing mechanism to controls. And this property is handled correctly by most of the popular browsers. Here is the code snippet : input, select, textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }