javascript - css如何设置选择框的样式

Question

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

每当我在选择字段中尝试太长时间时，文本都会覆盖下拉图标（我为此使用背景图像）。如果文本字段太长，有人知道如何制作下拉图标来覆盖文本吗？对此，我真的非常感激！

Answer 1

简单的

HTML

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

CSS

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 */
}

小提琴

Answer 2

您应该首先在每个浏览器中进行更正。然后添加填充以使箭头单独位于右侧。试试看。

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

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

祝你好运！

Answer 3

您可以设置padding，例如：

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

所以文字不会与你的背景图片重叠......

演示：http: //jsfiddle.net/darkajax/nekdS/

Answer 4

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

CSS：

#id {
border: 2px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border-color: black;
and so on...
}