How can i remove dropdown arrow in Firefox?

Question

How can i remove dropdown arrow in Firefox

I try many examples but not only a one example make something better for me

Please help me for this situation

here is my jsfiddle example

jsfiddle.net/m_atteeq/JjgVj/

I'm new on this forum and this is my 1st question

this might be a duplicate. http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select — webkit, Jun 26 '14 at 10:57
Sadly it appears to be a FF bug: https://bugzilla.mozilla.org/show_bug.cgi?id=649849. If you look towards the end there are some hacks to solve this. — PeteAUK, Jun 26 '14 at 11:04
@Durraab: Use -moz-appearance: dialog; may be this will help let know once tried.. working or not — user1853128, Jun 26 '14 at 11:15

score 0 · Accepted Answer · answered Jun 26 '14 at 11:31

try like this: demo

HTML:

<div class="select">
    <select name="month">
        <option value="na">Month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
</div>

CSS:

.select {
    width: 100px;
    overflow: hidden;
}
.select select {
    text-indent: 10px;
    text-overflow:'';
    width: 120px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;

}

You can try like this or you can use custom select box... Hope this helps

How can i remove dropdown arrow in Firefox?

1 Answers1