Cách xóa mũi tên khỏi thành phần được chọn trong Firefox

Tôi đang cố gắng tạo kiểu cho một selectphần tử bằng CSS3. Tôi nhận được kết quả mà tôi mong muốn trong WebKit (Chrome / Safari), nhưng Firefox không chơi tốt (tôi thậm chí không bận tâm đến IE). Tôi đang sử dụng thuộc tính CSS3 appearance, nhưng vì một số lý do, tôi không thể loại bỏ biểu tượng thả xuống khỏi Firefox.

Đây là một ví dụ về những gì tôi đang làm: http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

Như bạn có thể thấy, tôi không cố gắng cho bất cứ điều gì lạ mắt. Tôi chỉ muốn loại bỏ các kiểu mặc định và thêm vào mũi tên thả xuống của riêng tôi. Như tôi đã nói, tuyệt vời trong WebKit, không tuyệt vời trong Firefox. Rõ ràng, -moz-appearance: nonekhông loại bỏ các mục thả xuống.

Có ý kiến ​​gì không? Không, JavaScript không phải là một tùy chọn

Được rồi, tôi biết câu hỏi này đã cũ, nhưng 2 năm theo dõi và mozilla không làm gì cả.

Tôi đã đưa ra một cách giải quyết đơn giản.

Điều này về cơ bản loại bỏ tất cả định dạng của hộp chọn trong firefox và bao bọc một phần tử span xung quanh hộp chọn với kiểu tùy chỉnh của bạn, nhưng chỉ nên áp dụng cho firefox.

Nói rằng đây là menu chọn của bạn:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

Và giả sử lớp css 'css-select' là:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

Trong firefox, điều này sẽ hiển thị với menu chọn, theo sau là mũi tên firefox xấu xí, theo sau là tùy chỉnh đẹp mắt của bạn. Không lý tưởng.

Bây giờ để thực hiện điều này trong firefox, hãy thêm một phần tử span xung quanh với lớp 'css-select-moz':

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

Sau đó sửa CSS để ẩn mũi tên bẩn của mozilla bằng -moz-ngoại hình: cửa sổ và ném mũi tên tùy chỉnh vào lớp 'css-select-moz' của span, nhưng chỉ để nó hiển thị trên mozilla, như thế này:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

Khá tuyệt vời khi chỉ vấp phải lỗi này 3 giờ trước (Tôi mới biết về webdesign và hoàn toàn tự học). Tuy nhiên, cộng đồng này đã gián tiếp cung cấp cho tôi rất nhiều sự giúp đỡ, tôi nghĩ rằng đã đến lúc tôi trả lại một cái gì đó.

Tôi chỉ thử nghiệm nó trong firefox (mac) phiên bản 18, và sau đó 22 (sau khi tôi cập nhật).

Tất cả thông tin phản hồi đều được chào đón.

Cập nhật: điều này đã được sửa trong Firefox v35. Xem ý chính đầy đủ để biết chi tiết.

Chỉ cần tìm ra cách loại bỏ mũi tên chọn khỏi Firefox . Bí quyết là sử dụng kết hợp -prefix-appearance, text-indentvà text-overflow. Nó là CSS thuần túy và không yêu cầu đánh dấu thêm.

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Đã thử nghiệm trên Windows 8, Ubuntu và Mac, các phiên bản mới nhất của Firefox.

Ví dụ trực tiếp: http://jsfiddle.net/joaocunha/RUEbp/1/

Thêm về chủ đề: https://gist.github.com/joaocunha/6273016

Thủ thuật phù hợp với tôi là làm cho độ rộng chọn hơn 100% và áp dụng tràn: ẩn

select {
    overflow:hidden;
    width: 120%;
}

Đây là cách duy nhất ngay bây giờ để ẩn mũi tên thả xuống trong FF.

BTW. nếu bạn muốn thả xuống đẹp, hãy sử dụng http://harvesthq.github.com/chosen/

Cập nhật quan trọng:

Kể từ Firefox V35, thuộc tính ngoại hình hiện hoạt động !!

Từ ghi chú phát hành chính thức của firefox trên V35 :

Bây giờ, sử dụng -moz-appearancevới nonegiá trị trên một hộp tổ hợp, loại bỏ nút thả xuống (lỗi 649849).

Vì vậy, bây giờ để ẩn mũi tên mặc định - thật dễ dàng như thêm các quy tắc sau vào phần tử chọn của chúng tôi:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

BẢN GIỚI THIỆU

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Chúng tôi đã tìm thấy một cách đơn giản và tốt để làm điều này. Đó là trình duyệt chéo, có thể phân hủy và không phá vỡ một bài mẫu. Đầu tiên thiết lập các hộp chọn của opacityđể 0.

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

điều này là để bạn vẫn có thể nhấp vào nó

Sau đó tạo div với cùng kích thước với hộp chọn. Các div nên nằm dưới hộp chọn làm nền. Sử dụng { position: absolute }và z-indexđể đạt được điều này.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

Cập nhật div bên trong của div với javascript. Dễ dàng với jQuery:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

Đó là nó! Chỉ cần phong cách div của bạn thay vì hộp chọn. Tôi đã không kiểm tra mã ở trên vì vậy có lẽ bạn sẽ cần chỉnh nó. Nhưng hy vọng bạn có được ý chính.

Tôi nghĩ rằng giải pháp này nhịp đập {-webkit-appearance: none;}. Những gì trình duyệt nên làm nhiều nhất là ra lệnh tương tác với các thành phần của biểu mẫu, nhưng chắc chắn không phải là cách chúng hiển thị ban đầu trên trang vì điều đó phá vỡ thiết kế trang web.

Hãy thử cách này:

-webkit-appearance: button;
-moz-appearance: button;

Sau đó, bạn có thể sử dụng một hình ảnh khác làm nền và đặt nó:

background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

Có một cách khác cho trình duyệt moz:

text-indent:10px;

Nếu bạn có chiều rộng được xác định để chọn, thuộc tính này sẽ ấn nút hộp thả xuống mặc định bên dưới vùng chọn.

Nó làm việc cho tôi! ;)

Mặc dù không phải là một giải pháp hoàn chỉnh, tôi đã tìm thấy rằng

-moz-appearance: window;

Siêng năng hoạt động ở một mức độ nào đó. Bạn không thể thay đổi nền (màu hoặc hình ảnh) nhưng phần tử có thể được hiển thị vô hình bằng màu: trong suốt. Không hoàn hảo nhưng đó là một khởi đầu và bạn không cần thay thế phần tử cấp hệ thống bằng phần tử js.

Tôi nghĩ rằng tôi đã tìm thấy giải pháp tương thích với FF31 !!!
Dưới đây là hai tùy chọn được giải thích rõ tại liên kết này:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

Tôi đã sử dụng tùy chọn 1: Rodrigo-Ludgero đã đăng bản sửa lỗi này trên Github, bao gồm cả trực tuyến bản giới thiệu. Tôi đã thử nghiệm bản demo này trên Firefox 31.0 và nó dường như hoạt động chính xác. Đã thử nghiệm trên Chrome và IE. Đây là mã html:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Custom Select</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="custom-select fa-caret-down">
            <select name="" id="">
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
            </select>
        </div>
    </body>
</html>

và css:

.custom-select {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 2em;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.custom-select:hover {
    border-color: #999;
}

.custom-select:before {
    color: #333;
    display: block;
    font-family: 'FontAwesome';
    font-size: 1em;
    height: 100%;
    line-height: 2.5em;
    padding: 0 0.625em;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 1em;
    z-index: -1;
}

.custom-select select {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    color: #333;
    display: block;
    font-size: 100%;
    line-height: normal;
    margin: 0;
    padding: .5em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select select::-ms-expand {
    display: none; /* to ie 10 */
}

.custom-select select:focus {
    outline: none;
}
/* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
    background-color: #fff; /* this is necessary for overcome the caret default browser */
    pointer-events: none; 
    z-index: 1; /* this is necessary for overcome the pseudo element */
}

http://jsbin.com/pozomu/4/edit

Nó hoạt động rất tốt cho tôi!

Thật không may cho bạn đây là "một cái gì đó lạ mắt". Thông thường không phải là các tác giả web để thiết kế lại các yếu tố hình thức. Nhiều trình duyệt cố tình không cho phép bạn tạo kiểu cho chúng, để người dùng thấy các điều khiển hệ điều hành mà họ đã sử dụng.

Cách duy nhất để thực hiện điều này một cách nhất quán trên các trình duyệt và hệ điều hành, là sử dụng JavaScript và thay thế các selectphần tử bằng các phần tử "DHTML".

Bài viết sau đây cho thấy ba plugin dựa trên jQuery cho phép bạn làm điều đó (nó hơi cũ, nhưng tôi không thể tìm thấy bất cứ điều gì hiện tại ngay bây giờ)

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

/* Try this in FF30+ Covers up the arrow, turns off the background */ 
/* still lets you style the border around the image and allows selection on the arrow */


@-moz-document url-prefix() {

    .yourClass select {
        text-overflow: '';
        text-indent: -1px;
        -moz-appearance: none;
        background: none;

    }

    /*fix for popup in FF30 */
    .yourClass:after {
        position: absolute;
        margin-left: -27px;
        height: 22px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        content: url('../images/yourArrow.svg');
        pointer-events: none;
        overflow: hidden;
        border-right: 1px solid #yourBorderColour;
        border-top: 1px solid #yourBorderColour;
        border-bottom: 1px solid #yourBorderColour; 
    }
}

Tôi đang tạo kiểu chỉ cần chọn cái này

<select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

Nó hoạt động với tôi trong FF, Safari và Chrome trong tất cả các phiên bản tôi đã thử nghiệm.

Trong IE tôi đặt:

 select::-ms-expand {
 display: none;
}
/*to remove in all selects*/

Ngoài ra, bạn có thể: .your class :: - ms-extend {display: none; } .yourid :: - ms-exapan {display: none; }

Tôi biết câu hỏi này hơi cũ, nhưng vì nó xuất hiện trên google và đây là một giải pháp "mới":

appearance: normalCó vẻ như hoạt động tốt trong Firefox đối với tôi (phiên bản 5 bây giờ). nhưng không có trong Opera và IE8 / 9

Như một giải pháp thay thế cho Opera và IE9, tôi đã sử dụng :beforebút giả để tạo một hộp trắng mới và đặt nó lên trên mũi tên.

Thật không may, trong IE8 điều này không hoạt động. Hộp được hiển thị chính xác, nhưng dù sao mũi tên cũng nhô ra ...: - /

Sử dụng select:beforehoạt động tốt trong Opera, nhưng không phải trong IE. Nếu tôi nhìn vào các công cụ dành cho nhà phát triển, tôi thấy nó đang đọc các quy tắc một cách chính xác, và sau đó chỉ cần bỏ qua chúng (chúng bị gạch bỏ). Vì vậy, tôi sử dụng một <span class="selectwrap">xung quanh thực tế <select>.

select {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
  content: "";
  height: 0;
  width: 0;
  border: .9em solid red;
  background-color: red;
  position: absolute;
  right: -.1em;
  z-index: 42;
}

Bạn có thể cần phải điều chỉnh một chút, nhưng điều này làm việc cho tôi!

Tuyên bố miễn trừ trách nhiệm: Tôi đang sử dụng điều này để có được bản cứng đẹp của trang web với các biểu mẫu vì vậy tôi không cần phải tạo trang thứ hai. Tôi không phải là 1337 haxx0r, người muốn có thanh cuộn màu đỏ, <marquee>thẻ và không có gì :-) Vui lòng không áp dụng kiểu dáng quá mức cho các biểu mẫu trừ khi bạn có lý do rất chính đáng.

Sử dụng pointer-eventstài sản.

Ý tưởng ở đây là phủ một phần tử lên trên mũi tên thả xuống gốc (để tạo phần tử tùy chỉnh của chúng ta) và sau đó không cho phép các sự kiện con trỏ trên đó. [xem bài này ]

Đây là một FIDDLE hoạt động bằng phương pháp này.

Ngoài ra, trong câu trả lời SO này, tôi đã thảo luận về phương pháp này và một phương pháp khác chi tiết hơn.

Điều này hoạt động (được thử nghiệm trên Firefox 23.0.1):

select {
    -moz-appearance: radio-container;
}

dựa trên câu trả lời của @ JoãoCunha, một kiểu css hữu ích cho nhiều hơn một trình duyệt

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}

Hơn nữa với câu trả lời của Joao Cunha , vấn đề này hiện nằm trong Danh sách ToDo của Mozilla và được nhắm mục tiêu cho câu 35.

Đối với những người mong muốn, đây là một cách giải quyết của Todd Parker, được tham chiếu trên blog của Cunha, hoạt động ngày hôm nay:

http://jsfiddle.net/xvushd7x/

HTML:

<label class="wrapper">This label wraps the select
    <div class="button custom-select ff-hack">
        <select>
            <option>Apples</option>
            <option>Bananas</option>
            <option>Grapes</option>
            <option>Oranges</option>
            <option>A very long option name to test wrapping</option>
        </select>
    </div>
</label>

CSS:

/* Label styles: style as needed */
label {
  display:block;
  margin-top:2em;
  font-size: 0.9em;
  color:#777;
}

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0;
}

/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
  border: 1px solid #bbb;
  border-radius: .3em;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Font size must the 16px or larger to prevent iOS page zoom on focus */
  font-size:16px;
  /* General select styles: change as needed */
  font-family: helvetica, sans-serif;
  font-weight: bold;
  color: #444;
  padding: .6em 1.9em .5em .8em;
  line-height:1.3;
}


/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

.custom-select::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top:-4px;
  background-image: url(http://filamentgroup.com/files/select-arrow.png);
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}


/* Hover style */
.custom-select:hover {
  border:1px solid #888;
}

/* Focus style */
.custom-select select:focus {
  outline:none;
  box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
  background-color:transparent;
  color: #222;
  border:1px solid #aaa;
}

/* Set options to normal weight */
.custom-select option {
  font-weight:normal;
}

Kể từ Firefox 35, "-moz-appearance:none " mà bạn đã viết trong mã của mình, cuối cùng hãy loại bỏ nút mũi tên như mong muốn.

Đó là một lỗi được giải quyết kể từ phiên bản đó.

Rất nhiều cuộc thảo luận đang diễn ra ở đây & ở đó nhưng tôi không thấy một số giải pháp thích hợp cho vấn đề này. Cuối cùng kết thúc bằng cách viết một mã Jquery + CSS nhỏ để thực hiện HACK này trên IE & Firefox.

Tính chiều rộng phần tử (phần tử CHỌN) bằng cách sử dụng Jquery. Thêm một Wrapper Xung quanh Chọn phần tử và Giữ ẩn tràn cho phần tử này. Hãy chắc chắn rằng Width của trình bao bọc này là appox. Ít hơn 25px so với phần tử CHỌN. Điều này có thể dễ dàng thực hiện với Jquery. Vì vậy, bây giờ Biểu tượng của chúng tôi đã qua ..! và đã đến lúc thêm biểu tượng hình ảnh của chúng tôi vào yếu tố CHỌN ... !!! Chỉ cần thêm một vài dòng đơn giản để thêm nền và bạn đã hoàn tất .. !! Đảm bảo sử dụng ẩn tràn cho trình bao bọc bên ngoài,

Đây là một mẫu mã được thực hiện cho Drupal. Tuy nhiên cũng có thể được sử dụng cho những người khác bằng cách loại bỏ một vài dòng mã là Drupal Cụ thể.

/*
 * Jquery Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */
(function($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width', $element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width', $wrap_width);
      });
    }
  };
})(jQuery);

/*
 * CSS Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */

.nws-select {
  border: 1px solid #ccc;
  overflow: hidden;
  background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

Giải pháp hoạt động trên tất cả các trình duyệt IE, Chrome và Firefox Không cần thêm Hacks chiều rộng cố định bằng CSS. Tất cả đều được xử lý Động bằng cách sử dụng JQuery.!

Mô tả thêm tại: - http://northwebstudio.com/bloss/1/jquery/remove-drop-down-arrow-html-select-element-USE-jquery-and-css

thử cái này

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

Nó hoạt động

Các thuộc appearancetính từ CSS3 không cho phép nonegiá trị. Hãy xem tài liệu tham khảo W3C . Vì vậy, những gì bạn đang cố gắng làm không hợp lệ (thực sự Chrome cũng không nên chấp nhận).

Sau đó, thật đáng tiếc, chúng tôi thực sự không có bất kỳ giải pháp trình duyệt chéo nào để ẩn mũi tên đó bằng CSS thuần túy. Như đã chỉ ra, bạn sẽ cần JavaScript.

Tôi đề nghị bạn xem xét sử dụng plugin selectBox jQuery . Nó rất nhẹ và được thực hiện độc đáo.

Bạn có thể tăng chiều rộng của hộp và di chuyển mũi tên đến gần bên trái của mũi tên. điều này sau đó cho phép bạn che mũi tên bằng một div trắng trống.

Hãy xem: http://jsbin.com/aniyu4/86/edit

Bạn có chấp nhận những thay đổi nhỏ đối với html không?

Một cái gì đó giống như đặt một thẻ div có chứa thẻ chọn.

Hãy xem.

Hoặc, bạn có thể clip chọn. Một cái gì đó dọc theo dòng:

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

Điều này sẽ cắt 30px ở bên phải của hộp chọn, tước đi mũi tên. Bây giờ cung cấp hình ảnh nền 170px và voila, chọn theo kiểu

Đó là một vụ hack lớn, nhưng -moz-appearance: menulist-textcó thể là một mánh khóe.

Tôi có những vấn đề giống nhau. Thật dễ dàng để làm cho nó hoạt động trên FF và Chrome, nhưng trên IE (8+ mà chúng tôi cần hỗ trợ) mọi thứ trở nên phức tạp. Giải pháp đơn giản nhất tôi có thể tìm thấy cho các yếu tố chọn tùy chỉnh hoạt động "ở mọi nơi tôi đã thử", bao gồm IE8, là sử dụng .customSelect ()

Một cách hữu ích đối với tôi là đặt màn hình (chọn) thành inline-flex. Cắt mũi tên ra khỏi nút chọn của tôi. Không có tất cả các mã được thêm vào.

• Chỉ dành cho Fx. -webkit appearancevẫn cần cho Chrome, v.v ...

Câu trả lời của Jordan Young là tốt nhất. Nhưng nếu bạn không thể hoặc không muốn thay đổi HTML của mình, bạn có thể xem xét chỉ xóa mũi tên xuống tùy chỉnh được cung cấp cho Chrome, Safari, v.v. và để lại mũi tên mặc định của firefox - nhưng không có mũi tên kép. Không lý tưởng, nhưng một sửa chữa nhanh chóng tốt mà không thêm bất kỳ HTML nào và không ảnh hưởng đến giao diện tùy chỉnh của bạn trong các trình duyệt khác.

<select>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

CSS:

select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}

hackity hack ... một giải pháp hoạt động trong mọi trình duyệt tôi đã thử nghiệm (Safari, Firefox, Chrome). Không có bất kỳ IE nào nằm xung quanh, vì vậy sẽ rất tuyệt nếu bạn có thể kiểm tra và nhận xét:

<div class="wrapper">
  <select>
    <option>123456789</option>
    <option>234567890</option>
  </select>
</div>

CSS, với hình ảnh được mã hóa url:

.wrapper { position:relative; width:200px; }
.wrapper:after {
  content:"";
  display: block;
  position: absolute;
  top:1px; height:28px;
  right:1px; width:16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);

  pointer-events: none;
}

select {
  width: 100%;
  padding:3px;
  margin: 0;
  border-radius: 0;
  border:1px solid black;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  float:none!important;
  background:white;

  font-size:13px;
  line-height: 1em;
  height: 30px;
  padding:6px 20px 6px 10px;
}

http://codepen.io/anon/pen/myPEBy

Tôi đang sử dụng: phần tử sau để che mũi tên xấu xí. Vì chọn không hỗ trợ: sau đó, tôi cần một trình bao bọc để làm việc. Bây giờ, nếu bạn nhấp vào mũi tên, danh sách thả xuống sẽ không đăng ký ... trừ khi trình duyệt của bạn hỗ trợ pointer-events: none, tất cả mọi người ngoại trừ IE10- hiện: http://caniuse.com/#feat=pulum-events

Vì vậy, đối với tôi nó hoàn hảo - một giải pháp tốt, sạch sẽ, ít đau đầu, ít nhất là so với tất cả các tùy chọn khác bao gồm javascript.

tl; dr:

Nếu người dùng IE10 (hoặc thấp hơn) bấm vào mũi tên, nó sẽ không hoạt động. Hoạt động đủ tốt cho tôi ...

Nếu bạn không quan tâm đến vấn đề với JS, tôi đã viết một plugin jQuery nhỏ giúp bạn làm điều đó. Với nó, bạn không cần phải lo lắng về tiền tố của nhà cung cấp.

 $.fn.magicSelectBox = function() {
  var $e = this;

  $e.each(function() {
    var $select = $(this);

    var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
    var $innermagicbox = $('<div></div>').css({
      position: 'relative',
      height: '100%'
    });
    var $text = $('<span></span>').css({
      position: 'absolute'
    }).text($select.find("option:selected").text());

    $select.attr('class', null).css({
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute'
    }).on('change', function() {
      $text.text($select.find("option:selected").text());
    });

    $select.parent().append($magicbox);
    $innermagicbox.append($text, $select);
    $magicbox.append($innermagicbox);
  });

  return $e;
};

Fiddle ở đây: JS Fiddle

Điều kiện là bạn phải định kiểu chọn từ đầu (điều này có nghĩa là đặt nền và viền), nhưng dù sao bạn cũng có thể muốn làm điều này.

Ngoài ra, do hàm thay thế lựa chọn ban đầu bằng div, bạn sẽ mất mọi kiểu dáng được thực hiện trực tiếp trên bộ chọn được chọn trong CSS của bạn. Vì vậy, cung cấp cho phần tử chọn một lớp và phong cách lớp.

Hỗ trợ hầu hết các trình duyệt hiện đại, nếu bạn muốn nhắm mục tiêu các trình duyệt cũ hơn, bạn có thể thử phiên bản cũ hơn của jQuery, nhưng có lẽ phải thay thế on () bằng bind () trong hàm (không được kiểm tra)

Các câu trả lời khác dường như không hiệu quả với tôi, nhưng tôi đã tìm thấy bản hack này. Điều này làm việc cho tôi (tháng 7 năm 2014)

select {
-moz-appearance: textfield !important;
    }

Trong trường hợp của tôi, tôi cũng có trường nhập liệu thương mại điện tử nên tôi đã sử dụng trường này

.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
 }

Đã cập nhật câu trả lời của tôi để hiển thị chọn thay vì đầu vào