Compensating for Select Option loss

Question

I have a style I use for the fields of form:

.inputTextMedio {
    border: 1px solid rgb(0,0,0);
    border-radius: 10px;
    width: 250px;
    height: 30px;
    padding: 3px;
    display: inline-block;
}

The problem is I’m also using it for Select Options.

However, the Select Options end eating the pixels of margin and padding and in the end, instead of

width: 250px;
height: 30px;

They end up with

width: 242px; + 6 do padding + 2 do border = 250
height: 22px; + 6 do padding + 2 do border = 30

Is there a way to make up for that loss?

For example:

select {
  width  += 8px;
  height += 8px;
}

Answer 1

The element select has by default box-sizing: border-box;. Suffice change to content-box.

Create one more style just for select and place box-sizing: content-box;:

select.inputTextMedio{
   box-sizing: content-box;
}

Example without:

.inputTextMedio {
    border: 1px solid rgb(0,0,0);
    border-radius: 10px;
    width: 250px;
    height: 30px;
    padding: 3px;
    display: inline-block;
}

<input class="inputTextMedio">
<br>
<select class="inputTextMedio">
   <option> Selecione</option>
</select>

Example with:

.inputTextMedio {
    border: 1px solid rgb(0,0,0);
    border-radius: 10px;
    width: 250px;
    height: 30px;
    padding: 3px;
    display: inline-block;
}

select.inputTextMedio{
   box-sizing: content-box;
}

<input class="inputTextMedio">
<br>
<select class="inputTextMedio">
   <option> Selecione</option>
</select>

Answer 2

You can use the cal function of CSS to compensate for this.

So if you’re like this:

width: 242px; + 6 do padding + 2 do border = 250
height: 22px; + 6 do padding + 2 do border = 30

Would look like this:

width: calc(242px + 8px); 
height: calc(22px + 8px); 

Tip: Here you can read more about css Calc(): https://developer.mozilla.org/en-US/docs/Web/CSS/calc