Текст обрезается при использовании <select>

Хотя я использую один и тот же CSS для <input> и <select>, текст в <select> отключается, а текст на входе прекрасен. Почему это происходит и как его исправить?

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>

Ответ 1

Сначала удалите объявление height: 23px;.

Обратите внимание, что текст больше не вырезается, однако элементы имеют большую высоту, чем требуется.

Чтобы исправить это, просто проведите отступ до 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>

Ответ 2

Это происходит из-за заполнения. Рассмотрите только использование прокладки влево и вправо, в сочетании с минимальной высотой.

Ответ 3

Увеличьте высоту строки для выбора на несколько пикселей.

Это сработало для меня.

Изменено:

select {
    line-height: 15px;
}

To:

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

Ответ 4

Вы можете увеличить высоту элемента select:

select{
   height: 40px;
}