2

I was wondering if there is a way to remove the dropdown (<select>) button (the little arrow) from the dropdown menu? I want to create a item list, but without the arrow.

  • Steve
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
Steven
  • 13,250
  • 33
  • 95
  • 147

4 Answers4

2

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.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
0

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;
}
Community
  • 1
  • 1
Daniël Tulp
  • 1,745
  • 2
  • 22
  • 51
0

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

Metagrapher
  • 8,602
  • 1
  • 24
  • 31
-1

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.

Manjit Singh
  • 834
  • 4
  • 9
  • 12