CODEWITHSUNDEEP
htmlcss
jawo
jawo

Reputation: 896

select and input field, same formatting, different size

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

Upvotes: 0

Views: 163

Answers (2)

SW4
SW4

Reputation: 71150

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.

Upvotes: 0

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34189

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. */
}

Upvotes: 1

Related Questions