Có cách nào chỉ dành cho CSS để tạo kiểu <select>thả xuống không?

Tôi cần tạo kiểu cho một <select>biểu mẫu càng nhiều càng tốt, không có JavaScript. Các thuộc tính tôi có thể sử dụng để làm như vậy trong CSS là gì?

Mã này cần phải tương thích với tất cả các trình duyệt chính:

• Internet Explorer 6, 7 và 8
• Firefox
• Safari

Tôi biết tôi có thể làm điều đó với JavaScript: Ví dụ .

Và tôi không nói về kiểu dáng đơn giản. Tôi muốn biết, những gì tốt nhất chúng ta có thể làm chỉ với CSS.

Tôi tìm thấy câu hỏi tương tự trên Stack Overflow.

Và cái này trên Doctype.com.

Đây là ba giải pháp:

Giải pháp số 1 - xuất hiện: không có - với Internet Explorer 10 - 11 cách giải quyết ( Bản trình diễn )

-

Để ẩn mũi tên mặc định được đặt appearance: nonetrên thành phần chọn, sau đó thêm mũi tên tùy chỉnh của riêng bạn vớibackground-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

Hỗ trợ trình duyệt:

appearance: nonecó hỗ trợ trình duyệt rất tốt ( caniuse ) - ngoại trừ Internet Explorer 11 (và phiên bản mới hơn) và Firefox 34 (và phiên bản mới hơn).

Chúng tôi có thể cải thiện kỹ thuật này và thêm hỗ trợ cho Internet Explorer 10 và Internet Explorer 11 bằng cách thêm

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

Nếu Internet Explorer 9 là một mối quan tâm, chúng tôi không có cách nào để loại bỏ mũi tên mặc định (điều đó có nghĩa là bây giờ chúng tôi sẽ có hai mũi tên), nhưng, chúng tôi có thể sử dụng bộ chọn Internet Explorer 9 thú vị.

Để ít nhất hoàn tác mũi tên tùy chỉnh của chúng tôi - giữ nguyên mũi tên chọn mặc định.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

Tất cả cùng nhau:

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}


/* CAUTION: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

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

Giải pháp này rất dễ dàng và có hỗ trợ trình duyệt tốt - thường là đủ.

Nếu trình duyệt hỗ trợ cho Internet Explorer 9 (và phiên bản mới hơn) và Firefox 34 (và phiên bản mới hơn) là cần thiết thì hãy tiếp tục đọc ...

Giải pháp # 2 Cắt bớt phần tử chọn để ẩn mũi tên mặc định ( bản demo )

-

(Đọc thêm tại đây)

Bọc selectphần tử trong div với chiều rộng cố định và overflow:hidden.

Sau đó cung cấp cho selectphần tử chiều rộng lớn hơn khoảng 20 pixel so với div .

Kết quả là mũi tên thả xuống mặc định của selectphần tử sẽ bị ẩn (do overflow:hiddentrên hộp chứa) và bạn có thể đặt bất kỳ hình nền nào bạn muốn ở phía bên phải của div.

Các lợi thế của phương pháp này là nó là qua trình duyệt (Internet Explorer 8 và sau đó, WebKit , và Gecko ). Tuy nhiên, nhược điểm của phương pháp này là các tùy chọn thả xuống nhô ra ở phía bên tay phải (bằng 20 pixel mà chúng tôi ẩn ... vì các phần tử tùy chọn lấy chiều rộng của phần tử chọn).

[Tuy nhiên, cần lưu ý rằng nếu phần tử chọn tùy chỉnh chỉ cần thiết cho thiết bị di động - thì vấn đề trên không được áp dụng - do cách mỗi điện thoại thường mở phần tử chọn. Vì vậy, đối với thiết bị di động, đây có thể là giải pháp tốt nhất.]

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}

<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

Nếu mũi tên tùy chỉnh là cần thiết trên Firefox - trước Phiên bản 35 - nhưng bạn không cần hỗ trợ các phiên bản Internet Explorer cũ - thì hãy tiếp tục đọc ...

Giải pháp số 3 - Sử dụng pointer-eventstài sản ( bản demo )

-

(Đọc thêm tại đây)

Ý 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 đó.

Ưu điểm: Nó hoạt động tốt trong WebKit và Gecko. Nó trông cũng tốt (không có optionyếu tố nhô ra ).

Nhược điểm: Internet Explorer (Internet Explorer 10 trở xuống) không hỗ trợ pointer-events, có nghĩa là bạn không thể nhấp vào mũi tên tùy chỉnh. Ngoài ra, một nhược điểm (rõ ràng) khác với phương pháp này là bạn không thể nhắm mục tiêu hình ảnh mũi tên mới của mình bằng hiệu ứng di chuột hoặc con trỏ tay, bởi vì chúng tôi vừa vô hiệu hóa các sự kiện con trỏ trên chúng!

Tuy nhiên, với phương pháp này, bạn có thể sử dụng Modernizer hoặc các nhận xét có điều kiện để làm cho Internet Explorer trở lại tiêu chuẩn được xây dựng trong mũi tên.

Lưu ý: Do Internet Explorer 10 không hỗ trợ conditional commentsnữa: Nếu bạn muốn sử dụng phương pháp này, có lẽ bạn nên sử dụng Modernizr . Tuy nhiên, vẫn có thể loại trừ CSS các sự kiện con trỏ khỏi Internet Explorer 10 bằng cách hack CSS được mô tả ở đây .

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646E;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #DDD8DC;
  background: #FFF;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}

<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->

Có thể, nhưng thật không may, chủ yếu là trong các trình duyệt dựa trên WebKit đến mức mà chúng tôi, với tư cách là nhà phát triển, yêu cầu. Dưới đây là ví dụ về kiểu dáng CSS được thu thập từ bảng tùy chọn Chrome thông qua trình kiểm tra công cụ dành cho nhà phát triển tích hợp, được cải tiến để phù hợp với các thuộc tính CSS hiện được hỗ trợ trong hầu hết các trình duyệt hiện đại:

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* Fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer  10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Khi bạn chạy mã này trên bất kỳ trang nào trong trình duyệt dựa trên WebKit, nó sẽ thay đổi giao diện của hộp chọn, xóa mũi tên OS tiêu chuẩn và thêm mũi tên PNG, đặt một khoảng cách trước và sau nhãn, gần như mọi thứ bạn muốn.

Phần quan trọng nhất là appearancetài sản, thay đổi cách hành xử của phần tử.

Nó hoạt động hoàn hảo trong hầu hết tất cả các trình duyệt dựa trên WebKit, bao gồm cả trình duyệt trên thiết bị di động, mặc dù Gecko không hỗ trợ appearancecũng như WebKit.

Phần tử chọn và tính năng thả xuống của nó rất khó tạo kiểu.

thuộc tính phong cách cho yếu tố được chọn bởi Chris Heilmann xác nhận những gì Ryan Dohery đã nói trong một nhận xét cho câu trả lời đầu tiên:

"Phần tử chọn là một phần của hệ điều hành, không phải chrome trình duyệt. Do đó, nó rất không đáng tin cậy về kiểu dáng và dù sao cũng không nhất thiết phải thử."

Tôi đã có vấn đề chính xác này, ngoại trừ tôi không thể sử dụng hình ảnh và không bị giới hạn bởi hỗ trợ trình duyệt. Điều này nên là «trên spec» và cuối cùng may mắn bắt đầu làm việc ở mọi nơi .

Nó sử dụng các lớp nền xoay được xếp lớp để «cắt ra» một mũi tên thả xuống, vì các phần tử giả sẽ không hoạt động cho phần tử được chọn.

Chỉnh sửa: Trong phiên bản cập nhật này, tôi đang sử dụng các biến CSS và một hệ thống theo chủ đề nhỏ.

:root {
  --radius: 2px;
  --baseFg: dimgray;
  --baseBg: white;
  --accentFg: #006fc2;
  --accentBg: #bae1ff;
}

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}

<select>
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-pink">
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-construction">
  <option>So many options</option>
  <option>...</option>
</select>

Sự không nhất quán lớn nhất mà tôi nhận thấy khi thả xuống chọn kiểu là Safari và kết xuất Google Chrome (Firefox hoàn toàn có thể tùy chỉnh thông qua CSS). Sau một số tìm kiếm thông qua độ sâu tối nghĩa của Internet, tôi đã tìm thấy những điều sau đây, điều này gần như giải quyết hoàn toàn các vấn đề của tôi với WebKit:

Sửa lỗi Safari và Google Chrome :

select {
  -webkit-appearance: none;
}

Điều này, tuy nhiên, loại bỏ mũi tên thả xuống. Bạn có thể thêm một mũi tên thả xuống bằng cách sử dụng gần đó divvới nền, lề âm hoặc được định vị tuyệt đối trên danh sách thả xuống được chọn.

* Thêm thông tin và các biến khác có sẵn trong thuộc tính CSS: -webkit-ngoại hình .

<select>các thẻ có thể được tạo kiểu thông qua CSS giống như bất kỳ thành phần HTML nào khác trên trang HTML được hiển thị trong trình duyệt. Dưới đây là một ví dụ (quá đơn giản) sẽ định vị một yếu tố được chọn trên trang và hiển thị văn bản của các tùy chọn màu xanh lam.

Ví dụ tệp HTML (selectExample.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

Ví dụ tệp CSS (selectExample.css):

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}

Bài đăng trên blog Cách thả xuống biểu mẫu CSS không có JavaScript nào phù hợp với tôi, nhưng nó không thành công trong Opera :

select {
  border: 0 none;
  color: #FFFFFF;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  width: 378px;
  *width: 350px;
  *background: #58B14C;
}

#mainselection {
  overflow: hidden;
  width: 350px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  box-shadow: 1px 1px 11px #330033;
  background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Đây là một phiên bản hoạt động trong tất cả các trình duyệt hiện đại. Khóa này đang sử dụng appearance:noneloại bỏ định dạng mặc định. Vì tất cả các định dạng đã biến mất, bạn phải thêm lại vào mũi tên phân biệt trực quan lựa chọn từ đầu vào.

Ví dụ hoạt động: https://jsfiddle.net/gs2q1c7p/

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}

<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Tôi đã đến trường hợp của bạn bằng cách sử dụng Bootstrap . Đây là giải pháp đơn giản nhất có hiệu quả:

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1ex;
    background-origin: content-box;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <form class="form-horizontal">
    <select class="form-control">
      <option>One</option>
      <option>Two</option>
    </select>
  </form>
</section>

Lưu ý: công cụ base64 có fa-chevron-downtrong SVG.

Trong các trình duyệt hiện đại, việc tạo kiểu <select>trong CSS là tương đối không đau . Với appearance: nonephần khó khăn duy nhất là thay thế mũi tên (nếu đó là điều bạn muốn). Đây là một giải pháp sử dụng data:URI nội tuyến với SVG văn bản thuần túy:

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  
  background-repeat: no-repeat;
  background-size: 0.5em auto;
  background-position: right 0.25em center;
  padding-right: 1em;
  
  background-image: url("data:image/svg+xml;charset=utf-8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
      <polygon points='0,0 60,0 30,40' style='fill:black;'/> \
    </svg>");
}

<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select style="font-size: 2rem;">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Phần còn lại của kiểu dáng (viền, đệm, màu sắc, v.v.) khá đơn giản.

Điều này hoạt động trong tất cả các trình duyệt tôi vừa thử (Firefox 50, Chrome 55, Edge 38 và Safari 10). Một lưu ý về Firefox là nếu bạn muốn sử dụng #ký tự trong URI dữ liệu (ví dụ fill: #000), bạn cần phải thoát nó ( fill: %23000).

select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}

Tùy chỉnh Chọn kiểu CSS

Đã thử nghiệm trong Internet Explorer (10 và 11), Edge, Firefox và Chrome

select::-ms-expand {
  display: none;
}
select {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em 0.5em 0.5em;
  border: 1px solid #eee;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 1em, right 10px top 1em;
  background-size: 5px 5px, 5px 5px;
}

<select name="">
  <option value="">Lorem</option>
  <option value="">Lorem Ipsum</option>
</select>

<select name="" disabled>
  <option value="">Disabled</option>
</select>

<select name="" style="color:red;">
  <option value="">Color!</option>
  <option value="">Lorem Ipsum</option>
</select>

Sử dụng thuộc cliptính để cắt các đường viền và mũi tên của selectphần tử, sau đó thêm các kiểu thay thế của riêng bạn vào trình bao bọc:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
          body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green;  background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select>
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

Sử dụng lựa chọn thứ hai với độ mờ bằng 0 để làm cho nút có thể nhấp:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
    
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

Các tọa độ khác nhau giữa Webkit và các trình duyệt khác, nhưng truy vấn @media có thể bao gồm điều đó.

Người giới thiệu

• Các thử nghiệm Dojo FX: dojox.fx.ext-dojo.complex
• CSS Masking: Kiểm tra thuộc tính clip với chức năng chỉnh sửa và tự động giá trị clip vào hộp viền

Một ví dụ rất hay sử dụng :aftervà :befoređể thực hiện thủ thuật là trong Hộp chọn kiểu với CSS3 | CSSDeck

Chỉnh sửa phần tử này không được khuyến nghị, nhưng nếu bạn muốn thử nó giống như bất kỳ phần tử HTML nào khác.

Chỉnh sửa ví dụ:

/* Edit select */
select {
    /* CSS style here */
}

/* Edit option */
option {
    /* CSS style here */
}

/* Edit selected option */
/* element  attr    attr value */
option[selected="selected"] {
    /* CSS style here */
}

<select>
    <option >Something #1</option>
    <option selected="selected">Something #2</option>
    <option >Something #3</option>
</select>

label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

Điều này sử dụng màu nền cho các thành phần được chọn và tôi đã xóa hình ảnh ..

Đúng. Bạn có thể định kiểu bất kỳ phần tử HTML nào bằng tên thẻ của nó, như thế này:

select {
  font-weight: bold;
}

Tất nhiên, bạn cũng có thể sử dụng một lớp CSS để tạo kiểu cho nó, giống như bất kỳ phần tử nào khác:

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

Đây là một giải pháp dựa trên những ý tưởng yêu thích của tôi từ cuộc thảo luận này. Điều này cho phép tạo kiểu một phần tử <select> trực tiếp mà không cần thêm bất kỳ đánh dấu nào.

Nó hoạt động Internet Explorer 10 (và mới hơn) với dự phòng an toàn cho Internet Explorer 8/9. Một lưu ý cho các trình duyệt này là hình nền phải được định vị và đủ nhỏ để ẩn đằng sau điều khiển mở rộng gốc.

HTML

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
    display: none;
}

CodePen

http://codepen.io/ralgh/pen/gpgbGx

Kể từ Internet Explorer 10, bạn có thể sử dụng ::-ms-expandbộ chọn phần tử giả để tạo kiểu và ẩn, phần tử mũi tên thả xuống.

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

Kiểu dáng còn lại phải tương tự như các trình duyệt khác.

Đây là một nhánh rẽ cơ bản của jsfiddle của Danield áp dụng hỗ trợ cho IE10

Có một cách dễ dàng.

Kiểm tra câu đố này và tha thứ cho tôi về sự quá khích: https://jsfiddle.net/dkellner/7ac9us70/

Thủ thuật đằng sau: ngay khi thẻ <select> nhận được một thuộc tính có tên là "kích thước", nó sẽ hoạt động như một danh sách chiều cao cố định, và, đột nhiên, vì một số lý do, cho phép bạn tạo kiểu cho nó. Bây giờ, nói đúng ra, danh sách cố định là một tác dụng phụ - nhưng nó chỉ giúp chúng tôi nhiều hơn vì chúng tôi sử dụng nó cho "giao diện thả xuống".

Một ví dụ tối thiểu:

<style>

    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)"><br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="1">  Gandalf        </option>
            <option value="2">  Harry Potter   </option>
            <option value="3">  Jon Snow       </option>

            <!-- ... and so on -->

        </select>
    </span>
</div>

(để đơn giản, tôi đã làm nó với jQuery - nhưng bạn có thể làm tương tự mà không cần nó)

Ghi chú bên

• Giải pháp này cung cấp cho bạn nhiều hơn chỉ là một lựa chọn: giá trị cũng có thể chỉnh sửa theo cách thủ công. Sử dụng thuộc tính chỉ đọc nếu bạn thích cách hạn chế chọn mặc định.

• Để tối đa hóa khả năng tạo kiểu, các thẻ <optgroup> không ở xung quanh con cái của chúng, chúng được di chuyển trước chúng. Đó là chủ ý, nó rõ ràng hơn và họ rất vui khi làm việc như thế này, đừng lo lắng.

• Javascripts: vâng tôi biết OP đã nói "không có Javascript" nhưng tôi hiểu nó là làm ơn đừng bận tâm đến các plugin , điều này rất tốt. Bạn không cần bất kỳ thư viện cho cái này. Ngay cả jQuery, như tôi đã nói, nó chỉ cho sự rõ ràng của ví dụ.

Bạn chắc chắn nên làm điều đó như trong Kiểu chọn, nhóm chọn và tùy chọn với CSS . Theo nhiều cách, màu nền và màu sắc chỉ là những gì bạn thường cần để tạo kiểu tùy chọn, không phải toàn bộ lựa chọn.

Bạn cũng có thể thêm kiểu di chuột vào danh sách thả xuống.

select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}

<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>

Phương pháp thứ ba trong câu trả lời của Danield có thể được cải thiện để hoạt động với hiệu ứng di chuột và các sự kiện chuột khác. Chỉ cần đảm bảo rằng phần "nút" xuất hiện ngay sau phần tử chọn trong đánh dấu. Sau đó, nhắm mục tiêu nó bằng cách sử dụng bộ chọn + CSS:

HTML:

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

Tuy nhiên, điều này sẽ hiển thị hiệu ứng di chuột khi di chuột ở bất cứ đâu trên phần tử chọn, không chỉ trên "nút".

Tôi đang sử dụng phương pháp này kết hợp với Angular (vì dù sao dự án của tôi cũng là ứng dụng Angular), để bao quát toàn bộ phần tử chọn và để Angular hiển thị văn bản của tùy chọn đã chọn trong phần "nút". Trong trường hợp này, sẽ có ý nghĩa hoàn hảo rằng hiệu ứng di chuột được áp dụng khi di chuột ở bất cứ đâu trên vùng chọn.

Mặc dù vậy, nó không hoạt động mà không có JavaScript, vì vậy nếu bạn muốn làm điều này và trang web của bạn phải hoạt động mà không có JavaScript, bạn nên đảm bảo rằng tập lệnh của bạn thêm các thành phần và lớp cần thiết cho việc nâng cao. Theo cách đó, một trình duyệt không có JavaScript sẽ chỉ nhận được một biểu tượng bình thường, không bị thay đổi, thay vì một huy hiệu theo kiểu không cập nhật chính xác.

Một giải pháp chỉ CSS và HTML

Nó có vẻ tương thích với Chrome, Firefox và Internet Explorer 11. Nhưng vui lòng để lại phản hồi của bạn về các trình duyệt web khác.

Theo đề xuất của câu trả lời của Danield , tôi bọc lựa chọn của mình trong một div (thậm chí hai div cho khả năng tương thích trình duyệt x) để có được hành vi mong đợi.

Xem http://jsfiddle.net/bjap2/

HTML:

<div class="sort-options-wrapper">
    <div class="sort-options-wrapper-2">
        <select class="sort-options">
                <option value="choiceOne">choiceOne</option>
                <option value="choiceOne">choiceThree</option>
                <option value="choiceOne">choiceFour</option>
                <option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
        </select>
    </div>
    <div class="search-select-arrow-down"></div>
</div>

Chú ý hai hàm div.

Cũng lưu ý thêm div được thêm vào để đặt nút mũi tên xuống bất cứ nơi nào bạn thích (vị trí hoàn toàn), ở đây chúng tôi đặt nó ở bên trái.

CSS

.sort-options-wrapper {
    display: inline-block;
    position: relative;
    border: 1px solid #83837F;
}

/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
    overflow: hidden;
}

select {
    margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;

    /* margin-top & margin-bottom must be set since some
       browsers have default values for select elements */
    margin-bottom: 1px;
    margin-top: 1px;
}

select:focus {
    outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
    position: absolute;
    height: 10px;
    width: 12px;
    background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}