css如何设置选择框的样式

Question

我已成功设置选择框的样式。但是，我无法处理溢出问题。请看图片。

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

Answer 1

首先应该在每个浏览器中使用a进行更正。然后添加填充以让箭头单独在右侧。试试吧。

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

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

祝你好运！

Answer 2

您可以设置padding，例如：

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

因此文字与背景图片不重叠......

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

Answer 3

轻松

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

FIDDLE

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...
}