I want to stylize the default drop down arrow. I used the below code into my HTML file:

<div class="cselect">
    <select>
        <option>English</option>
        <option>Traditional Chinese </option>
        <option>Simplified Chinese</option>
    </select>
</div>

and

.cselect select {
        appearance:none;
        -webkit-appearance:none;
        -o-appearance:none;
        -moz-appearance: none;
        background: url("../images/down_arrow.png") no-repeat 46% 37%;
        border: 0 solid #000000;
        overflow: hidden;
        padding: 1px 2px 2px 2px;
        width: 100px;
    }

-moz-appearance: none; is not working.

This code worked because I have fixed the width and made the overflow:hidden. In actual the arrows are hidden because of overflow hidden property.But if the <option></option> tag has large content text, then it is not getting auto width to show the whole of the text. Please tell me any solutions.