你好,我有一点问题关于我的自定义选择布局。我创建了一个自定义选择,适用于所有浏览器,甚至IE。但是我的自定义选择有问题。首先看一下我的HTML代码:自定义选择与长的选择内容
.select-style {
padding: 0;
margin: 0;
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background-color: #fff;
background: #fff;
position: relative;
}
.select-style:after {
top: 50%;
left: 85%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-top-color: #000000;
border-width: 5px;
margin-top: -2px;
z-index: 100;
}
.select-style select {
padding: 5px 8px;
width: 130%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-style select:focus {
outline: none;
}
<div class="select-style">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="Volkswagon Polo">Volkswagon Polo</option>
</select>
</div>
的布局设计问题
如果选择了“大众汽车波罗”选项,您看到文本后面的黑色箭头。这看起来不是很好。我尝试了几个选项,但我无法管理它,使它看起来不错。我试图使用text-overflow
选项,但没有成功。有谁知道不通过箭头图标显示文本的好方法,而不改变选择的宽度?
嗨,是它好,如果我们去掉下拉箭头选择后? – Manoj
如果你设法让它看起来一样,并且它也适用于所有其他浏览器,特别是在IE中,那么通过删除after select属性,我很好。 @Manoj – Rotan075
希望这将为您的目的http://stackoverflow.com/questions/16603979/select-removing-dropdown-arrow – Manoj