Text gets cut when using <select> - css

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;
}

Answer 3

It happens because of the padding. Consider only using padding left and right, combined with min-height.

Answer 4

You could increase the height of the select item:
select{
height: 40px;
}