How to get equal width of input and select fields

by

Updated answer

Here is how to change the box model used by the input/textarea/select elements so that they all behave the same way. You need to use the box-sizing property which is implemented with a prefix for each browser

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

This means that the 2px difference we mentioned earlier does not exist..

example at http://www.jsfiddle.net/gaby/WaxTS/5/

note: On IE it works from version 8 and upwards..

Original

if you reset their borders then the select element will always be 2 pixels less than the input elements..

example: http://www.jsfiddle.net/gaby/WaxTS/2/

More Related Contents:

  1. How do I make a placeholder for a ‘select’ box?
  2. Change select box option background color
  3. inline-block boxes not fitting in their container [duplicate]
  4. How to remove the default arrow icon from a dropdown list (select element)?
  5. Select dropdown with fixed width cutting off content in IE
  6. Remove Select arrow on IE
  7. Html Select box options on Hover?
  8. Changing highlight color
  9. Set width of dropdown element in HTML select dropdown options
  10. Image in SELECT element [duplicate]
  11. How can change width of dropdown list?
  12. Rendering a hierarchy of “OPTION”s in a “SELECT” tag
  13. comma after td entry html [closed]
  14. Using relative URL in CSS file, what location is it relative to?
  15. How to create a circle with links on border side
  16. Is there a CSS selector for the first direct child only?
  17. Why the content is not covered by the background of an overlapping element?
  18. Drop-down menu that opens up/upward with pure css
  19. How to wrap text around an image using HTML/CSS
  20. Gap in Bootstrap stacked rows
  21. What is the standard naming convention for html/css ids and classes? [closed]
  22. Mosaic of images HTML/CSS
  23. Change Select List Option background colour on hover in html [duplicate]
  24. How do I remove the default link color of the html hyperlink ‘a’ tag?
  25. Multiple submit buttons on HTML form – designate one button as default [duplicate]
  26. CSS position element “fixed” inside scrolling container
  27. How to work with ellipsis in bootstrap responsive table
  28. Unordered List () default indent
  29. Is it possible to change the order of list items using CSS3?
  30. How to center-justify the last line of text in CSS?

Leave a Comment