Trình đơn thả xuống tùy chỉnh CSS Chọn hoạt động trên tất cả các trình duyệt IE7 + FF Webkit

Question

Tôi muốn tạo menu thả xuống tùy chỉnh hoạt động trên tất cả các trình duyệt. Tôi đã tạo một tài khoản ở đây nhưng mũi tên không thể nhấp được. Nếu tôi đặt nó làm nền cho lựa chọn, sau đó firefox sẽ ghi đè lên một mũi tên trên đầu trang của nó. Ai đó có thể cho tôi biết kỹ thuật tốt nhất để có được menu thả xuống tùy chỉnh hoạt động trên tất cả các trình duyệt là gì và làm cách nào để làm cho nút đó có thể nhấp mà không có 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

Bạn có thể kiểm tra Select2 plugin:

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

Select2 là một thay thế dựa trên jQuery cho các hộp chọn. Nó hỗ trợ tìm kiếm, tập hợp dữ liệu từ xa và cuộn kết quả vô hạn.

Nó khá phổ biến và rất dễ bảo trì. Nó sẽ bao gồm hầu hết các nhu cầu của bạn nếu không phải tất cả.

Answer 2

pointer-events có thể hữu ích cho vấn đề này vì bạn có thể đặt div trên nút mũi tên, nhưng vẫn có thể nhấp vào nút mũi tên.

Mã số pointer-events css giúp bạn có thể nhấp qua một div.

Cách tiếp cận này sẽ không hoạt động đối với các phiên bản IE cũ hơn IE11, tuy nhiên. Bạn có thể làm điều gì đó trong IE8 và IE9 nếu phần tử bạn đặt lên trên nút mũi tên là một phần tử SVG, nhưng sẽ phức tạp hơn khi tạo kiểu cho nút theo cách bạn muốn tiến hành như thế này.

Dưới đây là một ví dụ Js fiddle: http://jsfiddle.net/e7qnqzx6/2/

Answer 3

này rất đơn giản, bạn chỉ cần thêm một hình ảnh nền cho yếu tố lựa chọn và định vị nó, nơi bạn cần, nhưng đừng quên thêm:

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

Theo http://shouldiprefix.com/#appearance

Microsoft Edge và IE hỗ trợ điện thoại di động khách sạn này rộng tiền tố -webkit- chứ không phải vì lý do -ms- interop.

Tôi chỉ cần thực hiện fiddle http://jsfiddle.net/drjorgepolanco/uxxvayqe/

Answer 4

này Theo Link:. http://bavotasan.com/2011/style-select-box-using-only-css/ có rất nhiều làm lại thêm mà cần phải được thực hiện (Đặt thêm div và định vị hình ảnh có Ngoài ra việc thiết kế sẽ phá vỡ như tùy chọn Drilldown sẽ Đây là một cách dễ dàng và đơn giản mà sẽ cho phép bạn đặt hình ảnh thả xuống của riêng bạn và loại bỏ trình đơn thả xuống mặc định của trình duyệt. (Không sử dụng bất kỳ div bổ sung nào) Trình duyệt chéo của nó cũng như vậy.

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> 

này hoạt động tốt nhất trên trình duyệt Firefox. Tệ quá là Chrome và Safari không hỗ trợ kiểu CSS khá dễ dàng này.

Answer 6

Tôi cũng gặp sự cố tương tự. Cuối cùng tìm thấy một giải pháp tại https://techmeals.com/fe/questions/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers

Lưu ý:

1) Để được hỗ trợ Firefox có xử lý CSS đặc biệt cho mẹ CHỌN yếu tố, xin vui lòng xem xét kỹ hơn.

2) Tải down.png từ Down.png

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