Draex_ Draex_ - 6 months ago 7
CSS Question

Text gets cut when using <select>

Although I'm using the same CSS for both

<input>
and
<select>
, text in
<select>
gets cut off, while the text in input is perfect. Why is this happening and how to fix it?



input,
select {
box-sizing: content-box;
width: 90%;
height: 23px;
padding: 10px;
font-family: TheBoldFont;
font-size: 27px;
color: #f26e7c;
border: 4px solid black;
border-radius: 12px;
}

<input type="text" value="xxxxxxx">

<select>
<option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>





This is the result:

illustration

And this is what show up on hover in Developer tools of Google Chrome:

chrome illustration

Answer

Firstly remove the height: 23px; declaration.

Notice the the text is not cut anymore, however the elements have a greater height than what was needed.

To fix this, just chage the padding to padding: 6px 10px;

FIDDLE

input,
select {
  box-sizing: content-box;
  width: 90%;
  padding: 6px 10px;
  font-family: TheBoldFont;
  font-size: 27px;
  color: #f26e7c;
  border: 4px solid black;
  border-radius: 12px;
}
<input type="text" value="xxxxxxx">

<select>
  <option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>

Comments