1

I'm trying to hide the standard arrow from the select dropdown list.

I've resolved it for all browsers, but still can't remove or hide it for the Opera.

I need JS or CSS desicion. Any hack would be nice too!

HTML

<div class="field select-field">
    <select id="pre_order_form_order_type" class="form-control">
        <option value="">Select Type of paper</option>
        <option value="1">Essay (any type)</option>
        <option value="2">Admission Essay</option>
        <option value="3">Annotated Bibliography</option>
    </select>
</div>

CSS

.select-field {
        background: url(images/arrow.png) no-repeat right #e6e7e9;
        position: relative;
        overflow: hidden !important;
        border-radius: 6px !important;
        display: inline-block !important;
    }

    select::-ms-expand {
        display: none;
    }

    .select-field select {
        cursor: pointer;
        overflow: hidden;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none !important;
        -ms-appearance: none;
        appearance: none;
        text-indent: 1px;
        text-overflow: '';
        z-index: 10;
    }
Nick
  • 13
  • 5
  • Please show us your code. We don't know what you have done so far. – Gergo Erdosi Aug 03 '14 at 11:33
  • I've searched around quite extensively for this in the past for my self and tried again just now and it doesn't look possible. The most reliable way to have a cross-browser dropdown styled exactly as you want is to 'fake' the dropdown. – speak Aug 03 '14 at 11:58

0 Answers0