Javascript css如何设置选择框的样式

我已经成功地设计了一个选择框。但是，我无法处理溢出问题。请看图片

每当我尝试选择字段的时间过长时，文本就会覆盖下拉图标（我使用背景图像）。 如果文本字段太长，有人知道如何制作下拉图标来覆盖文本吗？

---

我真的很感激

您应该首先在每个浏览器中使用一个要更正的选项。然后添加填充，使箭头单独位于右侧。试试看

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

然后添加您自己的样式，例如背景边框、填充、框阴影等等

---

祝你好运

您可以设置

填充

，如：

input[type="text"] // Or whatever selector you're using
{
    padding-right: 15px;
}

因此文本不会与背景图像重叠

---

演示：

向其添加类似ID的内容，然后执行以下操作：

CSS:

轻松的

HTML

<select>
    <option>blabòaablabmalkbmakbvnozeetjztjzrjdjttjtjetjtjetja</option>
</select>

---

你能创建一个提琴吗？你能显示你当前的代码吗？这是选择输入，OP在后面是什么而不是文本否，如果你仔细阅读问题并查看OP的图像，你会注意到这是一个背景图像与文本对齐的输入right@darkajax，这是供参考的，

-moz外观：无在FF中不起作用。他们已经有好几年了。
<select>
    <option>blabòaablabmalkbmakbvnozeetjztjzrjdjttjtjetjtjetja</option>
</select>

select {
    max-width:200px; /* just my style, edit to what you want */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:url('http://pediatrics.evms.edu/assets/images/icon_arrow_down.png'); /* the first icon on google :) replace with your own */
    background-repeat:no-repeat;
    background-position:right;
    padding-right:15px; /* this do the trick */
}