Hier ist mein HTML:

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

Ich möchte den Namen des Produkts (dh 'Produkt1', 'Produkt2' usw.) fett und seine Kategorien (z. B. Elektronik, Sport usw.) kursiv schreiben, wobei nur CSS verwendet wird. Ich habe eine alte Frage gefunden, in der erwähnt wurde, dass HTML und CSS nicht möglich sind, aber hoffentlich gibt es jetzt eine Lösung.

Es gibt nur wenige Stilattribute, die auf ein <option>Element angewendet werden können .

Dies liegt daran, dass dieser Elementtyp ein Beispiel für ein "ersetztes Element" ist. Sie sind vom Betriebssystem abhängig und nicht Teil des HTML / Browsers. Es kann nicht über gestylt werden CSS.

Es gibt Ersatz - Plug-In / Bibliotheken , die aussehen wie ein , <select>sind aber tatsächlich regelmäßig zusammengesetzt HTMLElemente , die CAN - gestylt werden.

Nein, dies ist nicht möglich, da das Styling für diese Elemente vom Betriebssystem des Benutzers übernommen wird. MSDN beantwortet Ihre Frage hier :

Mit Ausnahme von background-colorund colorwerden Stileinstellungen, die über das Stilobjekt für das Optionselement angewendet werden, ignoriert.

Sie können die Optionselemente bis zu einem gewissen Grad formatieren.

Mit dem * CSS-Tag können Sie die Optionen in dem vom System gezeichneten Feld formatieren.

Beispiel:

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

Das wird so aussehen:

Ich habe dieses gute Beispiel für das Stylen der Auswahlen und Optionen gefunden und verwendet. Mit dieser Auswahl können Sie alles tun, was Sie wollen. Hier ist die Geige

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;
}

JS

// 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();
    });

});

Hier sind einige Möglichkeiten, um <option>zusammen mit dem zu stylen<select> Stylen wenn Sie Bootstrap und / oder jquery verwenden. Ich verstehe, dass dies nicht das ist, was das Originalplakat verlangt, aber ich dachte, ich könnte anderen helfen, die über diese Frage stolpern.

Sie können immer noch das Ziel erreichen, jedes <option>einzeln zu stylen , müssen jedoch möglicherweise auch einen bestimmten Stil anwenden <select>. Mein Favorit ist die unten erwähnte "Bootstrap Select" -Bibliothek.

Bootstrap Select Library (jquery)

Wenn Sie bereits Bootstrap verwenden, können Sie die Bootstrap Select- Bibliothek ausprobieren oder die folgende Bibliothek (da sie ein Bootstrap-Thema hat).

Beachten Sie, dass Sie das gesamte selectElement oder dasoption Elemente separat formatieren können.

Beispiele :

Abhängigkeiten : erfordert jQuery v1.9.1 +, Bootstrap , die Dropdown.js-Komponente von Bootstrap und das CSS von Bootstrap

Kompatibilität : Unsicher, aber Bootstrap sagt, dass es "die neuesten, stabilen Versionen aller gängigen Browser und Plattformen unterstützt".

Demo : 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>

Select2 (JS lib)

Es gibt eine Bibliothek namens Select2, die Sie verwenden können .

Abhängigkeiten : Die Bibliothek besteht nur aus JS + CSS + HTML (erfordert keine JQuery).

Kompatibilität : IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+

Demo : https://select2.org/getting-started/basic-usage

Es gibt auch ein Bootstrap-Thema .

Kein Bootstrap-Beispiel:

$(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>

Bootstrap-Beispiel:

$(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)

Wenn Sie zusätzliches Geld haben, können Sie eine Premium-Bibliothek MDBootstrap verwenden . (Dies ist ein komplettes UI-Kit , daher ist es nicht leicht.)

Auf diese Weise können Sie Ihre Auswahl- und Optionselemente mithilfe des Materialdesigns formatieren .

Es gibt eine kostenlose Version, aber Sie können das hübsche Materialdesign nicht verwenden!

Abhängigkeiten : Bootstrap 4 , JQuery,

Kompatibilität : "Unterstützt die neuesten, stabilen Versionen aller gängigen Browser und Plattformen."

Demo : https://mdbootstrap.com/docs/jquery/forms/select/#color

Scheint, als könnte ich das CSS für das selectin Chrome direkt einstellen . CSS- und HTML-Code:

.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>

Wie bereits erwähnt, besteht die einzige Möglichkeit darin, ein Plugin zu verwenden, das ersetzt <select> Funktionalität .

Eine Liste der jQuery-Plugins: http://plugins.jquery.com/tag/select/

Schauen Sie sich das Beispiel mit dem Select2Plugin an: http://jsfiddle.net/swsLokfj/23/

Mit Bootstrap können Sie das Styling über Dateninhalte verwenden:

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

Beispiel: https://silviomoreto.github.io/bootstrap-select/examples/

Einige Eigenschaften können für das <option>Tag gestaltet werden:

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

Sie können auch benutzerdefinierte Schriftarten für einzelne <option>Tags verwenden, z. B. Google-Schriftarten , Materialsymbole oder andere Symbolschriftarten von icomoon oder ähnlichem. (Das kann für Schriftartenauswahl usw. nützlich sein.)

In Anbetracht dessen können Sie einen Stapel aus Schriftfamilien erstellen und Symbole in <option>Tags einfügen , z.

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

woher ★kommt Iconsund der Rest kommt Roboto.

Beachten Sie jedoch, dass benutzerdefinierte Schriftarten für die mobile Auswahl nicht funktionieren.

Eigentlich können Sie hinzufügen: vor und: nach und diese stylen. Zumindest ist es etwas

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;
}

Es ist 2017 und es ist möglich, bestimmte Auswahloptionen anzuvisieren. In meinem Projekt habe ich eine Tabelle mit einer Klasse = "Variationen" , und die Auswahloptionen befinden sich in der Tabellenzelle td = "Wert" , und die Auswahl hat eine ID select # pa_color . Das Optionselement hat auch eine Klassenoption = "angehängt" (unter anderen Klassen-Tags). Wenn ein Benutzer als Großhandelskunde angemeldet ist, kann er alle Farboptionen sehen. Einzelhandelskunden dürfen jedoch keine 2 Farboptionen erwerben, daher habe ich sie deaktiviert

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

Es hat ein wenig Logik gekostet, aber hier ist, wie ich auf die deaktivierten Auswahloptionen abzielte.

CSS

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

Damit sind meine Farboptionen nur für Großhandelskunden sichtbar.

Lassen Sie hier eine schnelle Alternative, indem Sie den Klassenschalter auf einem Tisch verwenden. Das Verhalten ist einem ausgewählten sehr ähnlich, kann jedoch mit Übergängen, Filtern und Farben gestaltet werden, wobei jedes Kind individuell behandelt wird.

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>

Sie können Inline-Stile verwenden, um benutzerdefinierte Stile hinzuzufügen <option> Tags ein .

Zum Beispiel: <option style="font-weight:bold;color:#09C;">Option 1</option> Dadurch werden die Stile auf diese bestimmte angewendet<option> Element angewendet.

Dann können Sie ein bisschen Javascript-Magie verwenden, um die Inline-Stile auf alle <option>Elemente in einem <select>Tag wie folgt anzuwenden :

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

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

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

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

Sie können auch <option value="" disabled> <br> </option>einen Zeilenumbruch zwischen den Optionen hinzufügen.

Dieses Element wird vom Betriebssystem gerendert, nicht von HTML. Es kann nicht über CSS gestaltet werden.

	$(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>

Versuchen Sie dies, es kann Ihnen helfen

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

Sie können eine Klasse hinzufügen und die Schriftgröße angeben: 700; in Option. Wenn Sie dies verwenden, wird der gesamte Text fett gedruckt.

Es wird definitiv funktionieren. Die Auswahloption wird vom Betriebssystem und nicht von HTML gerendert . Deshalb wirkt sich der CSS-Stil im Allgemeinen nicht aus option{font-size : value ; background-color:colorCode; border-radius:value; }
funktioniert dies, aber wir können das Auffüllen, den Rand usw. nicht anpassen.

Der folgende Code funktioniert zu 100%, um das aus diesem Beispiel entnommene Auswahl-Tag anzupassen

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>

Auch wenn nicht viele Eigenschaften geändert werden müssen, können Sie den folgenden Stil nur mit CSS erreichen:

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;
    }
}