Hier is mijn HTML:

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

Ik wil de naam van het product (d.w.z. ‘Product1’, ‘Product2’ , enz.) vetgedrukt maken, en de categorieën (bijv. Elektronica, Sport, enz.) cursief maken, met alleen CSS. Ik heb een oude vraag gevonden waarin stond dat het niet mogelijk is om HTML en CSS te gebruiken, maar hopelijk is er nu een oplossing.

Antwoord 1, autoriteit 100%

Er zijn maar een paar stijlkenmerken die kunnen worden toegepast op een <option>-element.

Dit komt omdat dit type element een voorbeeld is van een “vervangen element”. Ze zijn afhankelijk van het besturingssysteem en maken geen deel uit van de HTML/browser. Het kan niet worden gestileerd via CSS.

Er zijn vervangende plug-ins/bibliotheken die eruitzien als een <select>maar in feite zijn samengesteld uit reguliere HTML-elementen die KUNNENworden gestileerd.

Antwoord 2, autoriteit 36%

Nee, dat is niet mogelijk, aangezien de vormgeving van deze elementen wordt afgehandeld door het besturingssysteem van de gebruiker. MSDN beantwoordt uw vraag hier:

Behalve voor background-coloren color, worden stijlinstellingen die via het stijlobject voor het optie-element worden toegepast, genegeerd.

Antwoord 3, autoriteit 14%

U kunt de optie-elementen tot op zekere hoogte opmaken.

Met de *CSS-selector kunt u de opties in het kader dat door het systeem wordt getekend, opmaken.

Voorbeeld:

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

Dat ziet er zo uit:

Antwoord 4, autoriteit 8%

Ik heb dit goede voorbeeld gevonden en gebruikt van het stylen van de selecties en opties. Je kunt hiermee alles selecteren wat je wilt. Hier is de 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;
}

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

Antwoord 5, Autoriteit 6%

Hier zijn enkele manieren om <option>samen met de <select>op te maken als u Bootstrap en/of jQuery gebruikt. Ik begrijp dat dit niet is wat de originele poster vraagt, maar ik dacht dat ik anderen kon helpen die op deze vraag stuiten.

Je kunt nog steeds het doel bereiken om elke <option>afzonderlijk te stylen, maar het kan zijn dat je ook een bepaalde stijl moet toepassen op de <select>. Mijn favoriet is de “Bootstrap Select”-bibliotheek die hieronder wordt vermeld.

Bootstrap-bibliotheek selecteren (jQuery)

Als je al bootstrap gebruikt, kun je de Bootstrap Selectproberen bibliotheekof de onderstaande bibliotheek (omdat deze een bootstrap-thema heeft).

Houd er rekening mee dat u het hele select-element of de option-elementen afzonderlijk kunt opmaken.

Voorbeelden:

Afhankelijkheden: vereist jQueryv1.9.1+, Bootstrap, de dropdown.js-component van Bootstrap en de CSS van Bootstrap

Compatibiliteit: onzeker, maar Bootstrap zegt dat het “de nieuwste, stabiele releases van alle belangrijke browsers en platforms ondersteunt”

Demo : https://developer.snapAppunctions.com/ bootstrap-select / voorbeelden /

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

Antwoord 6, Autoriteit 4%

Het lijkt erop dat ik gewoon de CSS kan instellen voor de selectin Chrome rechtstreeks. CSS- en HTML-code hieronder:

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

Antwoord 7, autoriteit 2%

Zoals reeds vermeld, is de enige manier om een plug-in te gebruiken die de functie <select>vervangt.

Een lijst met jQuery-plug-ins: http://plugins.jquery.com/tag/select/

Bekijk het voorbeeld met de plug-in Select2: http://jsfiddle. net/swsLokfj/23/

Antwoord 8

Sommige eigenschappen kunnen worden opgemaakt voor de tag<option>:

font-family
color
font-*
background-color

U kunt ook een aangepast lettertype gebruiken voor afzonderlijke <option>-tags, bijvoorbeeld elke google lettertype, Materiaalpictogrammenof andere pictogramlettertypen van icomoonof gelijkaardig. (Dat kan handig zijn voor lettertypekiezers enz.)

Daarmee kunt u een font-familiestapel maken en pictogrammen invoegen in <option>-tags, bijv.

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

Waar ★is overgenomen van Iconsen de rest is van Roboto.

Merk echter op dat aangepaste lettertypen niet werken voor MOBIELE SELECT.

Antwoord 9

Met Bootstrap kunt u styling gebruiken via gegevensinhoud:

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

Voorbeeld:
https://silviomoreto.github.io/bootstrap-election/examples/

Antwoord 10

Is dit wat je zoekt? Ik deed het met jQuery!

Run Code Snippet

$(".custom-select").each(function() {
    var classes = $(this).attr("class"),
        id      = $(this).attr("id"),
        name    = $(this).attr("name");
    var template =  '<div class="' + classes + '">';
    template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
    template += '<div class="custom-options">';
    $(this).find("option").each(function() {
        template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
    });
    template += '</div></div>';
    $(this).wrap('<div class="custom-select-wrapper"></div>');
    $(this).hide();
    $(this).after(template);
});
$(".custom-option:first-of-type").hover(function() {
    $(this).parents(".custom-options").addClass("option-hover");
}, function() {
    $(this).parents(".custom-options").removeClass("option-hover");
});
$(".custom-select-trigger").on("click", function() {
    $('html').one('click',function() {
        $(".custom-select").removeClass("opened");
    });
    $(this).parents(".custom-select").toggleClass("opened");
    event.stopPropagation();
});
$(".custom-option").on("click", function() {
    $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
    $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
    $(this).addClass("selection");
    $(this).parents(".custom-select").removeClass("opened");
    $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});

body {
font-family: 'Roboto', sans-serif;
}
 .custom-select-wrapper {
        position: relative;
        display: inline-block;
        user-select: none;
    }
    .custom-select-wrapper select {
        display: none;
    }
    .custom-select {
        position: relative;
        display: inline-block;
    }
    .custom-select-trigger {
        position: relative;
        display: block;
        width: 170px;
        padding: 0 84px 0 22px;
        font-size: 19px;
        font-weight: 300;
        color: #5f5f5f;
        line-height: 50px;
        background: #EAEAEA;
        border-radius: 4px;
        cursor: pointer;
        margin-left:20px;
        border: 1px solid #5f5f5f;
        transition: all 0.3s;
    }
    .custom-select-trigger:hover {
        background-color: #d9d9d9;
        transition: all 0.3s;
    }
    .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
        width: 10px; height: 10px;
        top: 50%; right: 25px;
        margin-top: -3px;
        border-bottom: 1px solid #5f5f5f;
        border-right: 1px solid #5f5f5f;
        transform: rotate(45deg) translateY(-50%);
        transition: all 0.4s ease-in-out;
        transform-origin: 50% 0;
    }
    .custom-select.opened .custom-select-trigger:after {
        margin-top: 3px;
        transform: rotate(-135deg) translateY(-50%);
    }
    .custom-options {
        position: absolute;
        display: block;
        top: 100%; left: 0; right: 0;
        margin: 15px 0;
        border: 1px solid #b5b5b5;
        border-radius: 4px;
        box-sizing: border-box;
        box-shadow: 0 2px 1px rgba(0,0,0,.07);
        background: #fff;
        transition: all 0.4s ease-in-out;
        margin-left: 20px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-15px);
    }
    .custom-select.opened .custom-options {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transform: translateY(0);
    }
    .custom-options:before {
        position: absolute;
        display: block;
        content: '';
        bottom: 100%; right: 25px;
        width: 7px; height: 7px;
        margin-bottom: -4px;
        border-top: 1px solid #b5b5b5;
        border-left: 1px solid #b5b5b5;
        background: #fff;
        transform: rotate(45deg);
        transition: all 0.4s ease-in-out;
    }
    .option-hover:before {
        background: #f9f9f9;
    }
    .custom-option {
        position: relative;
        display: block;
        padding: 0 22px;
        border-bottom: 1px solid #b5b5b5;
        font-size: 18px;
        font-weight: 600;
        color: #b5b5b5;
        line-height: 47px;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }
    .custom-option:first-of-type {
        border-radius: 4px 4px 0 0;
    }
    .custom-option:last-of-type {
        border-bottom: 0;
        border-radius: 0 0 4px 4px;
    }
    .custom-option:hover,
    .custom-option.selection {
        background: #f2f0f0;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sources" id="sources" class="custom-select sources" placeholder="My Categories">
    <option value="categoryOne">Category 1</option>
    <option value="categoryTwo">Category 2</option>
    <option value="categoryThree">Category 3</option>
    <option value="categoryFour">Category 4</option>
</select>

Antwoord 11

Het is 2017 en het IS mogelijk om specifieke geselecteerde opties te targeten. In mijn project heb ik een tabel met een class=”variations”, en de select-opties staan in de tabelcel td=”value”, en de select heeft een ID select#pa_color.
Het optie-element heeft ook een class option=”attached”(naast andere class-tags).
Als een gebruiker is ingelogd als groothandelklant, kan hij alle kleuropties zien. Maar retailklanten mogen geen 2 kleuropties kopen, dus ik heb ze uitgeschakeld

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

Het vergde wat logica, maar hier is hoe ik de uitgeschakelde selectie-opties heb getarget.

CSS

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

Daardoor zijn mijn kleuropties alleen zichtbaar voor groothandelsklanten.

Antwoord 12

Hier een snel alternatief, met behulp van klasse-toggle op een tafel. Het gedrag is vergelijkbaar met dat van een select, maar kan worden gestyled met overgangen, filters en kleuren, elk kind afzonderlijk.

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>

Antwoord 13

U kunt inline stijlen gebruiken om aangepaste stijlen toe te voegen aan <option>-tags.

Voor bijv.: <option style="font-weight:bold;color:#09C;">Option 1</option>
Dit zal de stijlen alleen toepassen op dit specifieke <option>element.

Dan kun je een beetje javascript-magie gebruiken om de inline-stijlen toe te passen op alle <option>-elementen binnen een <select>-tag, zoals:

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

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

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

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

U kunt ook <option value="" disabled> <br> </option>om een regeleinde toe te voegen tussen de opties.

Antwoord 14

Het zal zeker werken.
De select-optie wordt weergegeven door OSen niet door html. Dat is waarom de CSS-stijl geen effect heeft,.. in het algemeen
option{font-size : value ; background-color:colorCode; border-radius:value; }
dit zal werken, maar we kunnen de opvulling, marge enz. niet aanpassen.

Onderstaande code werkt 100% om geselecteerde tag aan te passen uit dit voorbeeld

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>

Antwoord 15

Zelfs als er niet veel eigenschappen te veranderen zijn, maar je kunt de volgende stijl alleen bereiken met css:

.options {
  border: 1px solid #e5e5e5;
  padding: 10px;
}
select {
  font-size: 14px;
  border: none;
  width: 100%;
  background: white;
}

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

Antwoord 16

Eigenlijk kun je :before en :after toevoegen en deze stijlen. Het is tenminste iets

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

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

Antwoord 17

Dit element wordt weergegeven door het besturingssysteem, niet door HTML. Het kan niet worden gestileerd via 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>

Antwoord 18

Je kunt een klasse toevoegen en geeft font-weight:700; in optie. Maar door dit te gebruiken wordt alle tekst vetgedrukt.

Antwoord 19

Dit is een html css-code die wordt gebruikt om opties op te maken en tag te selecteren.
Geselecteerde optie: achtergrond en vet
Na het sluiten ziet het er in itlaics uit.

   <style>
        .mydropdown{
         border:none;
         border-bottom:2px dotted black;
         display:inline;max-width:20%;
         font-style: italic;
         font-weight: 600;
         cursor: pointer;  
    }
    .mydropdown:hover , .myoption:active , .myoption:checked{
         border:2px dotted green;
    }
    .myoption{
         font-style: normal;
    }
    .mydropdown .myoption:checked,
    .mydropdown .myoption:hover ,
    .mydropdown .myoption:active {
        font-style: italic;
        font-weight: 600;
     }
    </style>

Previous articleHoe kunnen twee strings aaneengeschakeld worden?

Next articlejava.util.NoSuchElementException: geen regel gevonden

Hoe de optie van een html “select”-element opmaken?

Antwoord 1, autoriteit 100%

Antwoord 2, autoriteit 36%

Antwoord 3, autoriteit 14%

Antwoord 4, autoriteit 8%

Antwoord 5, Autoriteit 6%

Bootstrap-bibliotheek selecteren (jQuery)

Antwoord 6, Autoriteit 4%

Antwoord 7, autoriteit 2%

Antwoord 8

Antwoord 9

Antwoord 10

Antwoord 11

Antwoord 12

Antwoord 13

Antwoord 14

Antwoord 15

Antwoord 16

Antwoord 17

Antwoord 18

Antwoord 19

Other episodes

Hoe de optie van een html “select”-element opmaken?

Antwoord 1, autoriteit 100%

Antwoord 2, autoriteit 36%

Antwoord 3, autoriteit 14%

Antwoord 4, autoriteit 8%

Antwoord 5, Autoriteit 6%

Bootstrap-bibliotheek selecteren (jQuery)

Antwoord 6, Autoriteit 4%

Antwoord 7, autoriteit 2%

Antwoord 8

Antwoord 9

Antwoord 10

Antwoord 11

Antwoord 12

Antwoord 13

Antwoord 14

Antwoord 15

Antwoord 16

Antwoord 17

Antwoord 18

Antwoord 19

Other episodes

Invoertype=wachtwoord, laat de browser het wachtwoord niet onthouden

VueJS/browser caching productie builds

Verhogingspijlen aanpassen bij invoer van typenummer met CSS

Angular 4 img src is niet gevonden

HTML-tags binnen <label>

Items die alle kolommen/rijen beslaan met behulp van CSS-rasterlay-out

Angular 2 Hash (#) van de URL verwijderen