2

Possible Duplicate:
How to remove the arrow from a <select> tag in Firefox

The arrow only disappears in Chrome. Here is the script that I'm using:

<style type="text/css">
select {
    font-family: 'Viga', sans-serif;
    font-size:16px;
    color:#168ACB;
    padding: 5px 10px 5px 10px;
    margin: 0px 5px 5px 5px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
    background: #f8f8f8;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}
</style>

Chrome: https://i.stack.imgur.com/3Qv0G.png Firefox & IE: https://i.stack.imgur.com/w1iut.png

1
  • Tried encapsulating that in a div with overflow hidden? Div will have width < Width of select.
    – Playmaker
    Jun 2, 2012 at 12:20

1 Answer 1

3

Try seeing this:

How to remove the arrow from a select element in Firefox

Coincidentally my comment:

"Tried encapsulating that in a div with overflow hidden? Div will have width < Width of select."

is similar to the highest voted answer.

Not the answer you're looking for? Browse other questions tagged or ask your own question.