我想从HTML <select>元素中删除下拉箭头。例如:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
在Opera、Firefox和ie浏览器中如何做到这一点?
当前回答
如果你使用TailwindCSS 您可以利用无外观类。
<select class="appearance-none">
<option>Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
其他回答
如果你使用TailwindCSS 您可以利用无外观类。
<select class="appearance-none">
<option>Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
您无法使用全功能的跨浏览器支持来实现这一点。
试着取一个50像素的div，在它的右边浮动一个你想要的下拉图标
在这个div中，添加宽度为55像素的select标签(大于容器宽度)
我想你会得到你想要的。
如果你不想在右边放置任何图标，只需要执行所有的步骤，除了在右边浮动图像。在选择标签的焦点上设置outline:0。就是这样
select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;
}
适用于所有浏览器和所有版本:
JS
jQuery(document).ready(function () {
var widthOfSelect = $("#first").width();
widthOfSelect = widthOfSelect - 13;
//alert(widthOfSelect);
jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});
HTML
<select class="first" id="first">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
只是想把这个话题讲完。 很明显，这在IE9中是行不通的，但是我们可以通过一些css技巧来实现。
<div class="customselect">
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</div>
.customselect {
width: 80px;
overflow: hidden;
border:1px solid;
}
.customselect select {
width: 100px;
border:none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
