Mostefai Mohammed Amine

Software and Cloud Architect

Amine
  • Contact
Previous Post
Next Post
Jan 01, 2013 HTML5Web DesignWeb DevelopmentCSSCSS3

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;
}
adjustwidthbox sizing
Share This Post

Related posts

  • Adjust control widths using CSS One of the most important issues when designing websites is to adjust the width of the different con...
  • Angular 2 + ASP.NET Core + SASS Starter Visual Studio 2015 Solution Hi, Angular 2 is a very promising framework and one of its biggest advantages is that it takes the p
  • Tutoriel 5.1–Validation L’objectif de ce tutoriel (module 5) est d’utiliser les contrôles de validation afin de valider l’in...
Saving the comment

Cancel reply to comment

The captcha value you provided is incorrect.