Remove dropdown (select) button from dropdown menus?_问答_开发者

Remove dropdown (select) button from dropdown menus?

开发者 https://www.devze.com 2023-01-27 08:46 出处：网络

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.

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.