Text gets cut when using <select>

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

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

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>