Đây là HTML của tôi:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

Tôi muốn đặt tên của sản phẩm (ví dụ 'Product1', 'Product2', v.v.) và các danh mục của nó (viz. Điện tử, Thể thao, v.v.) được in nghiêng, chỉ sử dụng CSS. Tôi đã tìm thấy một câu hỏi cũ đề cập đến việc không thể sử dụng HTML và CSS, nhưng hy vọng, bây giờ đã có giải pháp.

Chỉ có một vài thuộc tính kiểu có thể được áp dụng cho một <option>phần tử.

Điều này là do loại phần tử này là một ví dụ về "phần tử được thay thế". Chúng phụ thuộc vào hệ điều hành và không phải là một phần của HTML / trình duyệt. Nó không thể được tạo kiểu thông qua CSS.

Có các trình cắm / thư viện thay thế trông giống như một <select>nhưng thực sự bao gồm các HTMLyếu tố thông thường CÓ THỂ được tạo kiểu.

Không, điều đó là không thể, vì kiểu dáng cho các yếu tố này được xử lý bởi HĐH của người dùng. MSDN sẽ trả lời câu hỏi của bạn ở đây :

Ngoại trừ background-colorvà color, các cài đặt kiểu được áp dụng thông qua đối tượng kiểu cho thành phần tùy chọn bị bỏ qua.

Bạn có thể định kiểu các yếu tố tùy chọn ở một mức độ nào đó.

Sử dụng thẻ * CSS, bạn có thể tạo kiểu cho các tùy chọn bên trong hộp được vẽ bởi hệ thống.

Thí dụ:

#ddlProducts *
{
 border-radius:15px;
 background-color:red;
}

Điều đó sẽ trông như thế này:

Tôi đã tìm thấy và sử dụng ví dụ hay này về kiểu dáng các lựa chọn và tùy chọn. Bạn có thể làm với lựa chọn này tất cả những gì bạn muốn. Đây là Fiddle

html

<select id="selectbox1">
    <option value="">Select an option&hellip;</option>
    <option value="aye">Aye</option>
    <option value="eh">Eh</option>
    <option value="ooh">Ooh</option>
    <option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
    <option value="">Month&hellip;</option>
    <option value="january">January</option>
    <option value="february">February</option>
    <option value="march">March</option>
    <option value="april">April</option>
    <option value="may">May</option>
    <option value="june">June</option>
    <option value="july">July</option>
    <option value="august">August</option>
    <option value="september">September</option>
    <option value="october">October</option>
    <option value="november">November</option>
    <option value="december">December</option>
</select>

css

body {
    padding:50px;
    background-color:white;
}
.s-hidden {
    visibility:hidden;
    padding-right:10px;
}
.select {
    cursor:pointer;
    display:inline-block;
    position:relative;
    font:normal 11px/22px Arial, Sans-Serif;
    color:black;
    border:1px solid #ccc;
}
.styledSelect {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:white;
    padding:0 10px;
    font-weight:bold;
}
.styledSelect:after {
    content:"";
    width:0;
    height:0;
    border:5px solid transparent;
    border-color:black transparent transparent transparent;
    position:absolute;
    top:9px;
    right:6px;
}
.styledSelect:active, .styledSelect.active {
    background-color:#eee;
}
.options {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:999;
    margin:0 0;
    padding:0 0;
    list-style:none;
    border:1px solid #ccc;
    background-color:white;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
    padding:0 6px;
    margin:0 0;
    padding:0 10px;
}
.options li:hover {
    background-color:#39f;
    color:white;
}

Mã não

// Iterate over each select element
$('select').each(function () {

    // Cache the number of options
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;

    // Hides the select element
    $this.addClass('s-hidden');

    // Wrap the select element in a div
    $this.wrap('<div class="select"></div>');

    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="styledSelect"></div>');

    // Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');

    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());

    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);

    // Insert a list item into the unordered list for each select option
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    // Cache the list items
    var $listItems = $list.children('li');

    // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
    $styledSelect.click(function (e) {
        e.stopPropagation();
        $('div.styledSelect.active').each(function () {
            $(this).removeClass('active').next('ul.options').hide();
        });
        $(this).toggleClass('active').next('ul.options').toggle();
    });

    // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
    // Updates the select element to have the value of the equivalent option
    $listItems.click(function (e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        /* alert($this.val()); Uncomment this for demonstration! */
    });

    // Hides the unordered list when clicking outside of it
    $(document).click(function () {
        $styledSelect.removeClass('active');
        $list.hide();
    });

});

Đây là một số cách để tạo kiểu <option>cùng với<select> nếu bạn đang sử dụng Bootstrap và / hoặc jquery. Tôi hiểu đây không phải là những gì người đăng ban đầu đang hỏi nhưng tôi nghĩ tôi có thể giúp những người khác vấp phải câu hỏi này.

Bạn vẫn có thể đạt được mục tiêu tạo kiểu <option>riêng, nhưng có thể cần phải áp dụng một số kiểu cho <select>cả. Yêu thích của tôi là thư viện "Bootstrap Chọn" được đề cập dưới đây.

Bootstrap Chọn Thư viện (jquery)

Nếu bạn đã sử dụng bootstrap, bạn có thể thử thư viện Bootstrap Chọn hoặc thư viện bên dưới (vì nó có chủ đề bootstrap).

Lưu ý rằng bạn có thể tạo kiểu cho toàn bộ thành selectphần hoặcoption thành phần riêng biệt.

Ví dụ :

Phụ thuộc : yêu cầu jQuery v1.9.1 +, Bootstrap , thành phần dropdown.js của Bootstrap và CSS của Bootstrap

Khả năng tương thích : Không chắc chắn, nhưng bootstrap cho biết nó "hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính"

Bản trình diễn : https://developer.snapappointments.com/bootstrap-select/examples/

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>

Chọn2 (JS lib)

Có một thư viện bạn có thể sử dụng được gọi là Chọn2 .

Phụ thuộc : Thư viện chỉ là JS + CSS + HTML (không yêu cầu JQuery).

Khả năng tương thích : IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+

Bản trình diễn : https://select2.org/getting-started/basic-usage

Ngoài ra còn có một chủ đề bootstrap có sẵn.

Không có ví dụ Bootstrap:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

Ví dụ về Bootstrap:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

MDBootstrap ($ & Bootstrap & JQuery)

Nếu bạn có thêm tiền, bạn có thể sử dụng thư viện MDBootstrap cao cấp . (Đây là toàn bộ UI Kit , vì vậy nó không sáng)

Điều này cho phép bạn định kiểu các thành phần tùy chọn và tùy chọn bằng cách sử dụng thiết kế Vật liệu .

Có một phiên bản miễn phí, nhưng nó sẽ không cho phép bạn sử dụng thiết kế Vật liệu đẹp!

Phụ thuộc : Bootstrap 4 , JQuery,

Khả năng tương thích : "hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính."

Bản trình diễn : https://mdbootstrap.com/docs/jquery/forms/select/#color

Có vẻ như tôi chỉ có thể đặt CSS selecttrực tiếp trong Chrome. Mã CSS và HTML được cung cấp dưới đây:

.boldoption {
	font-weight: bold;
}

<select>
	<option>Some normal-font option</option>
	<option>Another normal-font option</option>
	<option class="boldoption">Some bold option</option>
</select>

Như đã đề cập, cách duy nhất là sử dụng một plugin thay thế <select> chức năng.

Danh sách các plugin jQuery: http://plugins.jquery.com/tag/select/

Hãy xem ví dụ bằng cách sử dụng Select2plugin: http://jsfiddle.net/swsLokfj/23/

Bootstrap cho phép bạn sử dụng kiểu dáng thông qua nội dung dữ liệu:

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

Ví dụ: https://silviomoreto.github.io/bootstrap-select/examples/

Một số thuộc tính có thể được tạo kiểu cho <option>thẻ:

• font-family
• color
• font-*
• background-color

Ngoài ra, bạn có thể sử dụng phông chữ tùy chỉnh cho từng <option>thẻ riêng lẻ , ví dụ như bất kỳ phông chữ google , Biểu tượng vật liệu hoặc phông chữ biểu tượng khác từ icomoon hoặc tương tự. (Điều đó có thể có ích cho các bộ chọn phông chữ, v.v.)

Xem xét rằng, bạn có thể tạo ngăn xếp phông chữ gia đình và chèn biểu tượng trong <option>thẻ, ví dụ.

    <select>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">a    ★★★</option>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">b    ★★★★</option>
    </select>

nơi ★được lấy từ Iconsvà phần còn lại là từRoboto .

Lưu ý rằng các phông chữ tùy chỉnh không hoạt động cho chọn điện thoại di động.

Trên thực tế bạn có thể thêm: trước và: sau và phong cách những. Ít nhất đó là một cái gì đó

option{
    font-size:18px;
    background-color:#ffffff;
}
option:before{
    content: ">";
    font-size:20px;
    display:none;
    padding-right:10px;
    padding-left:5px;
    color:#fff;
}
option:hover:before{
    display:inline;
}

Đó là năm 2017 và có thể nhắm mục tiêu các tùy chọn chọn cụ thể. Trong dự án của tôi, tôi có một bảng có class = "biến thể" và các tùy chọn chọn nằm trong ô bảng td = "value" và lựa chọn có ID chọn # pa_color . Phần tử tùy chọn cũng có một tùy chọn lớp = "đính kèm" (trong số các thẻ lớp khác). Nếu người dùng đăng nhập như một khách hàng bán buôn, họ có thể thấy tất cả các tùy chọn màu. Nhưng khách hàng bán lẻ không được phép mua 2 tùy chọn màu, vì vậy tôi đã vô hiệu hóa chúng

<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>

Phải mất một chút logic, nhưng đây là cách tôi nhắm mục tiêu các tùy chọn chọn bị vô hiệu hóa.

CSS

table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}

Cùng với đó, các tùy chọn màu sắc của tôi chỉ hiển thị cho khách hàng bán buôn.

Để lại ở đây một sự thay thế nhanh chóng, sử dụng lớp chuyển đổi trên bàn. Hành vi này rất giống với một lựa chọn, nhưng có thể được tạo kiểu với sự chuyển tiếp, bộ lọc và màu sắc, mỗi đứa trẻ riêng lẻ.

function toggleSelect(){ 
 if (store.classList[0] === "hidden"){
    store.classList = "viewfull"
  }
  else {
    store.classList = "hidden"
  }
}

#store {
  overflow-y: scroll;
  max-height: 110px;
  max-width: 50%
 }
 
.hidden {
  display: none
 }
 
.viewfull {
  display: block
}

#store :nth-child(4) {
  background-color: lime;
}

span {font-size:2rem;cursor:pointer}

<span onclick="toggleSelect()">⮋</span>
 <div id="store" class="hidden">
 
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
 
 </div>

Bạn có thể sử dụng kiểu nội tuyến để thêm kiểu dáng yêu thích vào <option>thẻ.

Ví dụ: <option style="font-weight:bold;color:#09C;">Option 1</option> Điều này sẽ chỉ áp dụng các kiểu cho <option>phần tử cụ thể này .

Sau đó, bạn có thể sử dụng một chút phép thuật javascript để áp dụng các kiểu nội tuyến cho tất cả các <option>thành phần trong <select>thẻ như sau:

var select = $(document).getElementById('#select-element-id')

var option = select.children('#option-element-id')

option.css('font-weight', 'bold')

option.css('font-size', '24px')

Bạn cũng có thể sử dụng <option value="" disabled> <br> </option>để thêm ngắt dòng giữa các tùy chọn.

Phần tử này được hệ điều hành kết xuất, không phải HTML. Nó không thể được tạo kiểu thông qua CSS.

	$(function() {
    var clicky;
    var t=0;
    $(document).mousedown(function(e) {
        clicky = $(e.target);
    });
    $(document).mouseup(function(e) {
        clicky = null;
    });

    $("select").focusout(function(e) {
        if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {
        	$(this).parents().children("span.selected").html(clicky.html());
        	$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);
		}
        
        $(this).parents().children("span.lists").html('');
        

    });
    $('select > option').text(function(i, text) {
				var attr = $(this).attr('selected');
				if (typeof attr !== typeof undefined && attr !== false) {
        				$(this).parents().parents().children("span.selected").html(text);
				}
	});

		$("select").focusin(function(){
			$(this).children('option').text(function(i, text) {
    			$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
				});
		});

	});

select {
  width: 0px;
  height: 0px;
  overflow:hidden;
  outline: none;
  border: none;
  appearance:none;
  -moz-appearance: none;

}
label{
	display: inline-block;
	padding: 5px 10px;
	position: relative;
	width: 100px;
	height: 20px;
	background-color:#ccc;

}
label .selected{
	display: inline-block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
label span.lists{
	width: 100%;
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	box-shadow: 0px 0px 2px 0px #ccc;
	background-color:#fff;
	z-index: 9;
}
label span.item{
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #ccc;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<form action="?" method="GET">
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2" selected>item 2</option>
		<option value="3">item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test2">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2">item 2</option>
		<option value="3" selected>item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<button>Submit</button>
</form>

</body>
</html>

thử cái này nó có thể giúp bạn

[ https://codepen.io/venu9l/pen/jeNXzY][1]

Bạn có thể thêm một lớp và cho font-weight: 700; trong tùy chọn. Nhưng bằng cách sử dụng này, tất cả các văn bản sẽ trở nên đậm.

Nó chắc chắn sẽ hoạt động. Tùy chọn chọn được hiển thị bởi HĐH chứ không phải bằng html. Đó là lý do tại sao phong cách CSS không có hiệu lực, .. nói chung option{font-size : value ; background-color:colorCode; border-radius:value; }
điều này sẽ hoạt động, nhưng chúng tôi không thể tùy chỉnh phần đệm, lề, v.v.

Mã bên dưới hoạt động 100% để tùy chỉnh thẻ chọn được lấy từ ví dụ này

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < selElmnt.length; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        h = this.parentNode.previousSibling;
        for (i = 0; i < s.length; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            for (k = 0; k < y.length; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
  });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
</div>

Ngay cả khi không có nhiều thuộc tính để thay đổi, nhưng bạn chỉ có thể đạt được kiểu sau với css:

HTML:

<div class="options">
    <select>
        <option value="">Apple</option>
        <option value="">Banana</option>
        <option value="">Orange</option>
        <option value="">Mango</option>
    </select>
</div>

CSS:

.options {

    border: 1px solid #e5e5e5;
    padding: 10px;

    select {
        font-size: 14px;
        border: none;
        width: 100%;
        background: white;
    }
}