Làm cách nào để xóa biểu tượng mũi tên mặc định khỏi danh sách thả xuống (chọn phần tử)?

Tôi muốn xóa mũi tên thả xuống khỏi <select>phần tử HTML . Ví dụ:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

Làm thế nào để làm điều đó trong Opera, Firefox và Internet Explorer?

Không cần hack hay tràn. Có một yếu tố giả cho mũi tên thả xuống trên IE:

select::-ms-expand {
    display: none;
}

Các giải pháp được đề cập trước đây hoạt động tốt với chrome nhưng không phải trên Firefox.

Tôi đã tìm thấy một Giải pháp hoạt động tốt cả trong Chrome và Firefox (không phải trên IE). Thêm các thuộc tính sau vào CSS cho CHỌN của bạn và điều chỉnh lề trên cho phù hợp với nhu cầu của bạn.

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

Hi vọng điêu nay co ich :)

Cách đơn giản để loại bỏ mũi tên thả xuống từ chọn

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

Thử cái này :

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

Thùng rác: http://jsbin.com/aniyu4/2/edit

Nếu bạn sử dụng Internet Explorer:

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

Hoặc bạn có thể sử dụng Choosen: http://harvesthq.github.io/chosen/

Thử cái này:

HTML:

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS:

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

Hãy thử nó nó hoạt động với tôi,

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

Bạn không thể ẩn nhưng sử dụng ẩn tràn bạn thực sự có thể làm cho nó biến mất.

Chỉ muốn hoàn thành chủ đề. Để rõ ràng điều này không hoạt động trong IE9, tuy nhiên chúng ta có thể làm điều đó bằng thủ thuật css nhỏ.

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

Như tôi đã trả lời trong Xóa Chọn mũi tên trên IE

Trong trường hợp bạn muốn sử dụng lớp và giả lớp:

.simple-control là lớp css của bạn

:disabled là lớp giả

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}

select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}

Bạn không thể làm điều này với sự hỗ trợ trình duyệt chéo đầy đủ chức năng.

Hãy thử lấy một div 50 pixel giả sử và thả nổi một biểu tượng thả xuống mong muốn của bạn ở bên phải của điều này

Bây giờ trong div đó, có thể thêm thẻ chọn có chiều rộng 55 pixel (có thể nhiều hơn chiều rộng của ngăn chứa)

Tôi nghĩ bạn sẽ có được những gì bạn muốn.

Trong trường hợp bạn không muốn bất kỳ biểu tượng thả nào ở bên phải, chỉ cần thực hiện tất cả các bước ngoại trừ làm nổi hình ảnh ở bên phải. Đặt phác thảo: 0 về tiêu điểm cho thẻ chọn. đó là nó

có một thư viện có tên DropKick.js thay thế các menu thả xuống chọn thông thường bằng HTML / CSS để bạn có thể hoàn toàn tạo kiểu và kiểm soát chúng bằng javascript. http://dropkickjs.com/

Hoạt động cho tất cả các trình duyệt và tất cả các phiên bản:

Mã não

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

HTML

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>