CSS Custom Dropdown Auswählen, das funktioniert in allen Browsern IE7+ FF Webkit

Dies ist sehr einfach, Sie brauchen nur ein Hintergrundbild hinzufügen, um das select-element und positionieren Sie es, wo Sie es brauchen, aber don nicht vergessen, hinzuzufügen:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

Laut http://shouldiprefix.com/#appearance

Microsoft Rand und mobilen IE unterstützt diese Eigenschaft mit dem -webkit - Präfix anstatt -ms - für interop Gründen.

Ich habe gerade diese Geige http://jsfiddle.net/drjorgepolanco/uxxvayqe/

Könnten Sie überprüfen Select2 plugin:

http://ivaynberg.github.io/select2/

Select2 ist ein jQuery basierter Ersatz für select-Boxen. Es unterstützt die Suche, remote-Daten-sets, und unendliche scrollen der Ergebnisse.

Sehr beliebt und sehr wartungsfreundlich.
Es sollte sich auf die meisten Ihrer Bedürfnisse, wenn nicht alle.

War ich auch ein ähnliches problem. Schließlich fand man die Lösung bei https://techmeals.com/fe/questions/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers

Hinweis:

1) Für die Firefox-Unterstützung gibt es spezielle CSS-handling für das SELECT-element das Eltern, bitte nehmen Sie sich einen genaueren Blick.

2) Laden Sie die herunter.png aus Nach unten.png

CSS-code

        /* For Firefox browser we need to style for SELECT element parent. */

        @-moz-document url-prefix() {

            /* Please note this is the parent of "SELECT" element */

            .select-example {   
                background: url('https://techmeals.com/external/images/down.png');
                background-color: #FFFFFF;
                border: 1px solid #9e9e9e;
                background-size: auto 6px;
                background-repeat: no-repeat;
                background-position: 96% 13px;
            }
        }

        /* IE specific styles */
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
        {
                select.my-select-box {
                padding: 0 0 0 5px;
            }
        }

        /* IE specific styles */
        @supports (-ms-accelerator:true) {
                select.my-select-box {
                padding: 0 0 0 5px;
            }
        }

        select.my-select-box  {
            outline: none;
            background: #fff;
            -moz-appearance: window;
            -webkit-appearance: none;
            border-radius: 0px;
            text-overflow: "";
            background-image: url('https://techmeals.com/external/images/down.png');
            background-size: auto 6px;
            background-repeat: no-repeat;
            background-position: 96% 13px;
            cursor: pointer;
            height: 30px;
            width: 100%;
            border: 1px solid #9e9e9e;
            padding: 0 15px 0 5px;
            padding-right: 15px\9;      /* This will be apllied only to IE 7, IE 8 and IE 9 as */
            *padding-right: 15px;        /* This will be apllied only to IE 7 and below. */
            _padding-right: 15px;       /* This will be apllied only to IE 6 and below. */
        }

HTML-code

    <div class="select-example">
        <select class="my-select-box">
            <option value="1">First Option</option>
            <option value="2">Second Option</option>
            <option value="3">Third Option</option>
            <option value="4">Fourth Option</option>
        </select>
    </div>