How to get equal width of input and select fields

Question

On the form  I have one select and two input fields  These elements are vertically aligned  Unfortunately  I can t get equal width of these elements    Here s my code    lt select name  name1  style  width 198px  gt     lt option gt value1 lt  option gt     lt option gt value2 lt  option gt   lt  select gt  lt br  gt   lt input type  text  name  id1  style  width 193px  gt  lt br  gt   lt input type  text  name  id2  style  width 193px  gt    For above example  the best width for select element is 198 or 199 px  of course I tried 193px  but the difference is major   I think  it depends on resolution  on various computers and browsers since these elements don t have equal widths  sometimes I thinks difference is about 1 or 2 px   I ve tried to set these elements in div or table rows  but it doesn t help    Q  How could I get precisely equal width of these elements

User · Answer

create another class and increase the with size with 2px example   enquiry fld normal  width 278px  important       enquiry fld normal select  width 280px  important

User · Answer

I tried Gaby s answer   1  above but it only partially solved my problem  Instead I used the following CSS  where content-box was changed to border-box   input  select       -webkit-box-sizing  border-box         -moz-box-sizing  border-box              box-sizing  border-box

User · Answer

Add this code in css    select  input type  text          width 100         box-sizing border-box

User · Answer

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

[html] How to get equal width of input and select fields

Examples related to html

Examples related to css

Examples related to html-select

Examples related to border-box