防止 select 标签中的文字与背景图片重叠

Question

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>

Answer 1

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>

Answer 2

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>