select and input field, same formatting, different size

Question

Why is it that <input> and <select> fields are displayed in different sizes, even if formatted in the same way?

.classname fieldset input,select {
  float: right;
  width: 50%;
}

The <select> ends up a little smaller than <input>. - Here's a fiddle. enter image description here

add - box-sizing: border-box; for .classname fieldset input,select — Dmitriy
– Dmitriy, Commented Jun 3, 2015 at 6:48

Yeldar Kurmangaliyev · Accepted Answer · 2015-06-03 06:49:50Z

1

Try specifying box-sizing and reseting border values:

.classname fieldset input,select 
{
    float: right;
    width: 50%;
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #AAA; /* Set your color here. */
}

answered Jun 3, 2015 at 6:49

Yeldar Kurmangaliyev

34.4k13 gold badges64 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jawo Over a year ago

Strange, this helped a little but didn't solve the problem. Still one px difference.

jawo Over a year ago

Added padding: 1px; in additional to your code was the solution.

SW4 · Accepted Answer · 2015-06-03 07:27:41Z

0

As noted, you likely want to set box-sizing, however it should be set to border-box and not content-box, meaning you should also not need to change anything else:

.classname fieldset input,select {
  float: right;
  width: 50%;
  box-sizing:border-box;
}

Box-Sizing:

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements.

border-box

The width and height properties include the padding and border, but not the margin.

answered Jun 3, 2015 at 7:27

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Collectives™ on Stack Overflow

select and input field, same formatting, different size

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related