Text gets cut when using <select>

Question

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:

Answer 1

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 change 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>

Answer 2

Increase the line-height of the select by a few pixels.

This worked for me.

Changed this:

select {     line-height: 15px; } 

To:

select {     line-height: 17px !important; }