Prevent text in select tag from overlapping background image

user_4329847 0
Viewed 533

I have a simple select which needs to remain at most 200px in width. The issue I'm having is that the longer text is appearing on top of the background image.

How can I get it so that the select remains 200px and then, if longer text exists, it will not overlap the dropdown arrow?

    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>

css html
2 Answers

Simply increase the right padding.

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>

user_21068600

You could use the text-overflow:ellipsis; property

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;
      overflow:hidden;
      text-overflow:ellipsis;
      padding-right:40px;
    }
<select>
  <option>This option here is really long</option>
  <option>Medium length option</option>
  <option>short</option>
</select>

user_25509870
Related