我想从HTML <select>元素中删除下拉箭头。例如:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
在Opera、Firefox和ie浏览器中如何做到这一点?
我想从HTML <select>元素中删除下拉箭头。例如:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
在Opera、Firefox和ie浏览器中如何做到这一点?
当前回答
隐藏插入符号图标的一个简单易行的方法是在CSS中添加背景图像,值为none,外观为none;
select.without-icon {appearance:none;background-image:url('');} <label>with Icon</label> <select class="with-icon"> <option value="select" selected>Select</option> <option value="Html Css">HTML CSS </option> <option value="web development">Web Development</option> <option value="Front End">Front End</option> <option value="Programming">Programming</option> </select> <label>Without Icon</label> <select class="without-icon"> <option value="select" selected>Select</option> <option value="Html Css">HTML CSS </option> <option value="web development">Web Development</option> <option value="Front End">Front End</option> <option value="Programming">Programming</option> </select>
,就像这样:
background-image:url('');
其他回答
试试这个:
HTML:
<div class="customselect">
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</div>
CSS:
.customselect {
width: 70px;
overflow: hidden;
}
.customselect select {
width: 100px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
不需要黑客或溢出。IE中有一个下拉箭头的伪元素:
select::-ms-expand {
display: none;
}
隐藏插入符号图标的一个简单易行的方法是在CSS中添加背景图像,值为none,外观为none;
select.without-icon {appearance:none;background-image:url('');} <label>with Icon</label> <select class="with-icon"> <option value="select" selected>Select</option> <option value="Html Css">HTML CSS </option> <option value="web development">Web Development</option> <option value="Front End">Front End</option> <option value="Programming">Programming</option> </select> <label>Without Icon</label> <select class="without-icon"> <option value="select" selected>Select</option> <option value="Html Css">HTML CSS </option> <option value="web development">Web Development</option> <option value="Front End">Front End</option> <option value="Programming">Programming</option> </select>
,就像这样:
background-image:url('');
试试这个,对我有用,
<style> select{ border: 0 !important; /*Removes border*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; text-overflow:''; text-indent: 0.01px; /* Removes default arrow from firefox*/ text-overflow: ""; /*Removes default arrow from firefox*/ } select::-ms-expand { display: none; } .select-wrapper { padding-left:0px; overflow:hidden; } </style> <div class="select-wrapper"> <select> ... </select> </div>
你不能隐藏,但是使用overflow hidden你可以让它消失。
适用于所有浏览器和所有版本:
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>