Wie kann man die Option eines HTML-Elements "select" formatieren?

201

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.

MrClan
quelle
Ich bin mir nicht sicher. Von denke ich nicht. Dazu benötigen Sie etwas JavaScript (jQuery) -Magie.
Madaras Geist
6
Optionen sind immer noch genauso nervig wie nie zuvor. Was Sie möglicherweise verwenden möchten, ist eine optgroup: htmlhelp.com/reference/html40/forms/optgroup.html Dies gibt Ihnen eine fette und kursiv gedruckte Kategorie (wie Electronics), unter die eine Reihe von Optionen fallen.
Wolv2012

Antworten:

199

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.

Diodeus - James MacFarlane
quelle
2
Dieses Verhalten variiert zwischen verschiedenen Browsern und verschiedenen Betriebssystemen. Es lohnt sich zu klären, ob Sie hauptsächlich über IE unter Windows sprechen.
Vince Bowdren
4
Sie können select > optionstylen, aber es gibt keine zuverlässige Crossbrowser-Lösung dafür, und zumindest auf Chrom können Sie Schriftgröße, Familie, Hintergrund und Vordergrundfarbe höchstens anpassen. Vielleicht noch ein paar Verbesserungen, aber Dinge wie Polsterung, Schwebefarbe und so weiter konnte ich nicht ändern. In der Tat kann es Alternativen geben, aber je nach Projekt kann das <select> -Tag beispielsweise für die Winkelvalidierung oder aus einem anderen Grund erforderlich sein.
Felype
3
@none Ich habe eine Antwort auf Styling-Options-Tags gepostet . Es wird nicht gezeigt, wie Sie stylen <option>, aber es wird gezeigt, wie Sie emulieren, <select>damit Sie die Optionen stylen können.
UndoingTech
3
Obwohl dies die akzeptierte Antwort ist, ist es möglich, OPTIONmit CSS mit modernen Browsern zu
stylen
2
Bei der Einführung mobiler Geräte ist dies noch weniger stilisierbar, da die Optionselemente nicht einmal in Bezug auf die Auswahl im Seitenfluss angezeigt werden - sie werden in einem separaten scrollbaren Abschnitt am unteren Bildschirmrand aufgelistet - ganz anders gestaltet als wie Sie es in einem herkömmlichen Browser erwarten.
Ehrfurcht
74

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.

esqew
quelle
Die Schlussfolgerung lautet also: "Die Option einer Auswahl kann nicht nur mit CSS teilweise gestaltet werden", richtig ??? :(
MrClan
27
Der wichtige Punkt hier ist , dass sie können gestylt werden, nur sehr minimal.
Devios1
1
Um den Standpunkt von devios zu erweitern: Die native Auswahl kann für Windows minimal gestaltet werden, muss jedoch nicht unbedingt für andere Betriebssysteme gelten. Wie in Pumbo weiter unten erwähnt, müssen Sie die Auswahl gegen andere Elemente (normalerweise eine ul) austauschen und die Auswahlfunktion in JavaScript duplizieren, um die vollständige Kontrolle über die Stile zu erhalten.
Benjamin Robinson
3
<option style = "color: 'red';"> funktioniert bei mir nicht ... Vorschlag?
Fabio
1
style="background-color: red;color: red;"funktioniert bei mir nicht BEARBEITEN: Nach dem Schließen der Entwicklerkonsole wurde der Stil angewendet.
Schwarz
33

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:

Geben Sie hier die Bildbeschreibung ein

Zoron19
quelle
2
Dies gilt nur, weil der All-Selektor auf die Schatten-DOM-Innereien abzielt. Sie können diese manuell pro Browser ausrichten.
Mystrdat
20

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

});
Anahit Ghazaryan
quelle
1
Könnten Sie bitte den Code hier posten, weil er vielleicht eines Tages entfernt wird, aber hier wird er an einem
sicheren
Es ist eine sehr dynamische Art, mit der Auswahl das zu tun, was Sie wollen. Wenn Sie eine bessere Option haben, freue ich mich, sie hier als Antwort zu sehen. @Ahnbizcad
Anahit DEV
17
Dies ist KEIN natives HTML <Auswahl>, sondern rendert nur eines mit etwas jQuery-Code neu. Wenn Sie dies tun möchten, können Sie auch ein jQuery-Plugin, eine React-Komponente usw. verwenden, das die Tastatur nach oben / unten, Typeahead / Suche usw. verwaltet.
John Culviner
10

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 :

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

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/[email protected]/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 .

select2

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 .

Geben Sie hier die Bildbeschreibung ein

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

Katie
quelle
19
Da es um die Gestaltung des Optionselements geht , nicht um das Auswahlelement .
Jsalinas
5
Diese Antwort ist irreführend, da Sie zwar ausdrücklich zeigen, dass Sie die Auswahl formatieren können , aber behaupten, dass die Option so gestaltet werden kann, obwohl es sich um ein Betriebssystemelement handelt, das nur minimales CSS-Design akzeptiert.
Andrew Gray
@ Jsalinas Entschuldigung, meine vorherige Antwort war grausam. Ich habe es durch eines ersetzt, von dem ich hoffe, dass es besser ist.
Katie
1
Gute Antwort! Gute Beispiele!
cskwg
Select2 4.0 ist nicht mehr rein, da es jetzt auf jQuery aufbaut.
Galmok
9

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>
Geben Sie hier die Bildbeschreibung ein

HoldOffHunger
quelle
2
@ Muhamed Al Khalil: Ich habe das Beispiel aktualisiert, um es klarer zu machen, da die aktuell ausgewählte Option auch einen eigenen Stil hat. Wenn das nicht funktioniert, vermute ich dann Probleme mit der Browserkompatibilität. = \
HoldOffHunger
3
@Akash: Interessanterweise funktionierte dies unter Firefox, bevor Firefox Quantum veröffentlicht wurde, und es funktioniert derzeit noch unter Chrome (60% + der Nutzer). Ich wette, es ist ein Fehler!
HoldOffHunger
1
Dies funktioniert nur für das Dropdown-Menü, nicht für das, was als ausgewählt angezeigt wird. Schade.
WebDude0482
3

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/

Bhetzie
quelle
9
In Datenattribute eingebettetes HTML macht mich wirklich nervös.
Ben Hull
2

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.

dy_
quelle
<option style = "color: 'red';"> funktioniert bei mir nicht ... Vorschlag?
Fabio
1
Entfernen Sie Anführungszeichen über red: <option style = "color: red;">
dy_
1

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

ProSales Software-Systeme
quelle
1

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.

Mr. Garrison
quelle
1

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>

NVRM
quelle
1

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.

Vinayak Mukherjee
quelle
0

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]
Venkat G.
quelle
0

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.

Anas Chaudhary
quelle
0

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>

Harikrishnan k
quelle
Aus der Bewertung: Hallo, bitte antworten Sie nicht nur mit dem Quellcode. Versuchen Sie, eine schöne Beschreibung der Funktionsweise Ihrer Lösung zu geben. Siehe: Wie schreibe ich eine gute Antwort? . Danke
sɐunıɔ ןɐ qɐp
Dieser Code stammt direkt von w2schools w3schools.com/howto/tryit.asp?filename=tryhow_custom_select
devpato
0

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

Geben Sie hier die Bildbeschreibung ein

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;
    }
}
Anil Singh
quelle