html - 防止选择标签中的文本与背景图像重叠

Question

我有一个简单的 select 需要保持最多 200px 的宽度。我遇到的问题是较长的文本出现在背景图像的顶部。

我怎样才能让选择保持 200px 然后，如果存在较长的文本，它不会与下拉箭头重叠？

    select{
      width: 200px;
      border: 0;
      background: #fff url(https://f.hubspotusercontent00.net/hubfs/2367000/select_arrow.png/medium.png?t=1592558417346);
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: right 25px center;
      background-size: 15px;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 10px 15px;
      border: 1px solid #B8B9BA;
      outline:none;
      border-radius: 26px;
    }

<select>
  <option>This option here is really long</option>
  <option>Medium length option</option>
  <option>short</option>
</select>

Answer 1

只需增加右边的内边距。

select{
      width: 200px;
      border: 0;
      background: #fff url(https://f.hubspotusercontent00.net/hubfs/2367000/select_arrow.png/medium.png?t=1592558417346);
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: right 25px center;
      background-size: 15px;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 10px 50px 10px 15px;
      border: 1px solid #B8B9BA;
      outline:none;
      border-radius: 26px;
    }

<select>
  <option>This option here is really long</option>
  <option>Medium length option</option>
  <option>short</option>
</select>