Remove dropdown (select) button from dropdown menus?
I was wondering if there is a way to remove the dropdown (<select>) butt开发者_JS百科on (the little arrow) from the dropdown menu? I want to create a item list, but without the arrow.
- Steve
You can't do this, especially cross-browser. You can replace the <select> elements entirely with another control, but you can't modify how a <select> renders...not in the way you want at least.
Here are a few examples of replacements.
Perhaps you are looking for something more like this:
<html>
<body>
<select size=1>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</body>
</html>
This will create a select list of items one item tall. On some browsers there will still be an empty scrollbar, but it will get rid of the drop down arrow. As long as the size of the select tag is set then the arrow will not appear.
There are more options on select lists here: http://www.w3schools.com/tags/tag_select.asp
this answer from João Cunha is working wonders for me
pure CSS!
I added a bit of code to extend the browser support, see my answer in that question or below:
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
text-indent: 0.01px;
text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
display: none;
}
Try this code:
select {
-webkit-appearance: none;
background-color: #FFF;
border: medium none;
color: #555555;
font-family: inherit;
outline: medium none;
overflow: hidden;
padding: 0;
text-overflow: ellipsis;
white-space: nowrap;
width: 10em;
height: 1em;
}
itz work for me. Just try it.
加载中,请稍侯......
精彩评论