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:
And this is what show up on hover in Developer tools of Google Chrome: