Niestandardowe menu rozwijane CSS Wybierz, które działa we wszystkich przeglądarkach IE7 + FF Webkit

Question

Chciałbym utworzyć niestandardowe rozwijanie, które działa we wszystkich przeglądarkach. Stworzyłem jeden tutaj, ale strzałka nie jest klikalna. Jeśli ustawię go jako tło dla zaznaczenia, to Firefox nadpisze strzałkę na nim. Czy ktoś może mi powiedzieć, jaka jest najlepsza technika, aby uzyskać niestandardowe menu rozwijane, które działa we wszystkich przeglądarkach i jak mogę klikać ten przycisk bez 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> 

Answer 1

Można sprawdzić Wybór2 wtyczki:

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

Select2 to oparty na jQuery zamiennik dla wybranych skrzynek. Obsługuje wyszukiwanie, zdalne zbiory danych i nieskończone przewijanie wyników.

Jest dość popularny i bardzo łatwy w utrzymaniu. Powinien zaspokajać większość twoich potrzeb, jeśli nie wszystkie.

Answer 2

Może to być przydatne dla tego problemu, ponieważ można umieścić przycisk div nad przyciskiem strzałki, ale nadal można kliknąć przycisk strzałki.

css umożliwia kliknięcie elementu div.

To podejście nie będzie jednak działać w przypadku wersji IE starszych niż IE11. Możesz coś pracować w IE8 i IE9, jeśli element, który umieścisz na górze przycisku ze strzałką, jest elementem SVG, ale będzie bardziej skomplikowany styl przycisku tak, jak chcesz postępować w ten sposób.

tu Js skrzypce przykład: http://jsfiddle.net/e7qnqzx6/2/

Answer 3

To jest bardzo proste, wystarczy dodać obraz tła do elementu select i umieść go gdzie trzeba, ale nie zapomnij dodać:

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

Według http://shouldiprefix.com/#appearance

Microsoft Edge i IE Mobile wsparcia Width właściwość -webkit- prefiks zamiast -ms- powodów międzyoperacyjnych.

właśnie to skrzypce http://jsfiddle.net/drjorgepolanco/uxxvayqe/

Answer 4

Zgodnie Link:. http://bavotasan.com/2011/style-select-box-using-only-css/ istnieje wiele dodatkowych przeróbek, które należy zrobić (umieścić dodatkowy div i ustawić obraz tam również projekt złamie jako drążenia opcja być źle dopasowanym do zaznaczenia

Oto prosty i prosty sposób, dzięki któremu możesz umieścić własny obraz rozwijany i usunąć domyślne menu przeglądarki (bez użycia dodatkowego elementu div) oraz jego przeglądarkę.

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

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

ten działa najlepiej w przeglądarce Firefox. Szkoda, że ​​Chrome i Safari nie obsługują tego dość łatwego stylu CSS.

Answer 6

Miałem również podobny problem. W końcu znalazłem jedno rozwiązanie w https://techmeals.com/fe/questions/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers

Uwaga:

1) dla wsparcia Firefoksa istnieje specjalna obsługa CSS dla rodzica SELECT elementu, proszę przyjrzeć się bliżej.

2) Pobierz down.png z Down.png

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

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