CSS Custom Dropdown Выберите, что работает во всех браузерах IE7 + FF Webkit

Я хотел бы создать настраиваемое раскрывающееся меню, которое работает во всех браузерах. Я создал его здесь, но стрелка не может быть нажата. Если я установил его как фон для выбора, то firefox перезапишет стрелку поверх нее. Может ли кто-нибудь сказать мне, что лучший способ получить выпадающее меню, которое работает во всех браузерах, и как сделать эту ручку кликабельной без Javascript?

http://jsfiddle.net/DJDf8/1/

CSS

#menulist {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height:32px;
    border:1px solid #000;
    width:260px;
    text-indent: 8px;
}
.arrow{

    cursor:pointer;
    height:32px; 
    width:24px;
    position:absolute;
    right:0px;
    background-color:#c8c8c8;
    background:url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') 0;
}

HTML:

<span style="position:relative;" >
           <span class="arrow" ></span>
           <select id="menulist">
                <option value="one">One</option>
                <option value="two">Two</option>
           </select>    
        </span>

Ответ 1

Это очень просто, вам просто нужно добавить фоновое изображение к элементу select и поместить его туда, где вам нужно, но не забудьте добавить:

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

Согласно http://shouldiprefix.com/#appearance

Microsoft Edge и IE поддерживают эту ширину этого свойства как префикс -webkit-pre, а не -ms- для аргументов interop.

Я только что сделал эту скрипку http://jsfiddle.net/drjorgepolanco/uxxvayqe/

Ответ 2

В соответствии со ссылкой: http://bavotasan.com/2011/style-select-box-using-only-css/ есть много дополнительных доработок, которые необходимо выполнить (добавьте дополнительный div и разместите изображение там. Также будет разбит дизайн поскольку параметр детализации будет неверным для выбора.

Вот простой и простой способ, который позволит вам разместить собственное раскрывающееся изображение и удалить раскрывающееся меню по умолчанию для браузера (без использования дополнительного div). Его перекрестный браузер.

HTML

<select class="dropdown" name="drop-down">
  <option value="select-option">Please select...</option>
  <option value="Local-Community-Enquiry">Option 1</option>
  <option value="Bag-Packing-in-Store">Option 2</option>
</select>

CSS

select.dropdown {
  margin: 0px;
  margin-top: 12px;
  height: 48px;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  padding: 9px;
  font-family: tescoregular;
  font-size: 16px;
  color: #666666;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  -moz-appearance: none;
  appearance: none;
  background: url('yoururl/dropdown.png') no-repeat 97% 50% #ffffff;
  background-size: 11px 7px;
}

Ответ 3

Вы можете проверить плагин Select2:

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

Select2 - это замена на основе jQuery для отдельных полей. Он поддерживает поиск, удаленные наборы данных и бесконечную прокрутку результатов.

Это довольно популярный и очень удобный. Он должен покрывать большинство ваших потребностей, если не все.

Ответ 4

pointer-events может быть полезен для этой проблемы, так как вы могли бы поместить div над кнопкой со стрелкой, но все же сможете нажать кнопку со стрелкой.

pointer-events css позволяет щелкнуть по div.

Однако этот подход не будет работать для версий IE старше IE11. Вы могли бы что-то работать в IE8 и IE9, если элемент, который вы помещаете поверх кнопки со стрелкой, является элементом SVG, но будет сложнее стилизовать кнопку так, как вы хотите продолжить это.

Вот пример скрипта Js: http://jsfiddle.net/e7qnqzx6/2/

Ответ 5

<select class="dropdownmenu" name="drop-down">
    <option class="dropdownmenu_list1" value="select-option">Choose ...</option>
    <option class="dropdownmenu_list2" value="Topic 1">Option 1</option>
    <option class="dropdownmenu_list3" value="Topic 2">Option 2</option>
</select>

Это лучше всего работает в Firefox. Жаль, что Chrome и Safari не поддерживают этот довольно простой стиль CSS.

Ответ 6

У меня тоже была аналогичная проблема. Наконец, найдено одно решение в https://techmeals.com/fe/info/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers

Примечание:

1) Для поддержки Firefox есть специальная обработка CSS для родителя элемента SELECT, пожалуйста, присмотритесь.

2) Загрузите down.png из Down.png

CSS-код

        /* 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-код

    <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>