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>
<h1>Select-Menüs mit <em>rich text</em></h1>
<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
<span class="symbol" aria-hidden="true">€</span>
</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
<span class="symbol" aria-hidden="true">£</span>
</option>
<option value="usd" selected>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg" alt="">
US Dollar
<span class="symbol" aria-hidden="true">$</span>
</option>
<option value="sfr">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f3/Flag_of_Switzerland.svg" alt="">
Schweizer Franken
<span class="symbol" aria-hidden="true">CHF</span>
</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
<span class="symbol" aria-hidden="true">¥</span>
</option>
</select>
</body>
</html>
