Beispiel:Select-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<title>Select - 2 </title>
<style>
/* Enter into custom mode */ select,
- picker(select) {
appearance: base-select;
}
/* Styling the options list */
- picker(select) {
border-radius: 0.5rem; padding: 0;
}
option, selectedcontent {
display: grid; grid-template-columns: 1.5em 1.5em auto 2em; /* checkmark | flag | text | symbol */ align-items: center; gap: 0.5em; padding: 0.25em 0.5em;
}
option:hover {background:oklch(0.6 0.1 245/0.3);}
selectedcontent {
grid-template-columns: 1.5em 10em 2em 1.5em; /* flag | text | symbol | picker-icon */
}
select::picker-icon {
color: green;
}
select:open::picker-icon {
color: steelBlue;
}
select option::checkmark {
content: "✔";
color: steelBlue; font-size: 1.5em; font-weight: bold; }
.symbol {
margin-left: 1rem;
justify-self: end;
font-size: 1.5em; font-weight: bold;
}
.btn-to-open-select {
border: none; border-radius: 0.5rem; display: grid; grid-template-columns: 1fr 1fr auto; padding: 0 1rem 0 0.5rem; width: 15rem;
}
img, figure {
width: 1em;
}
</style>
</head> <body>
Select-Menüs mit rich text
<label for="currency-select">Wie möchten Sie bezahlen?</label> <select name="currency-select" id="currency-select" aria-label="Currency preference:">
<button class="btn-to-open-select"> <selectedcontent></selectedcontent> </button> <option value="eur"> <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg" alt=""> Euro € </option> <option value="gbp"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg" alt=""> Pound Sterling £ </option> <option value="usd" selected> <img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Flag_of_the_United_States_%28Web_Colors%29.svg" alt=""> US Dollar $ </option>
<option value="sfr">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f3/Flag_of_Switzerland.svg" alt=""> Schweizer Franken CHF </option>
<option value="sfr">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg" alt=""> Renminbi ¥ </option>
</select>
</body> </html>
