Selects > Custom selects

Bread selector upgraded

In this one, we want the breads to be visible in the selector by turning it into a customisable select.

Opting in with base appearance

In CSS, we set a appearance: base-select on both the select:

select#fancybread { 
	appearance: base-select;
}

and on the picker:

select#fancybread::picker(select) { 
	appearance: base-select;
}

To make this a bit cleaner, we can apply these rules only when browsers support appearance: base-select, and set appearance: none either way:

select#fancybread { 
	appearance: none;
	
	@supports (appearance: base-select) {
	  &,
	  &::picker(select) {
		appearance: base-select;
	}
}

That results in this:

							<style>
select#fancybread { 
	appearance: none;
	
	@supports (appearance: base-select) {
		&,
		&::picker(select) {
		appearance: base-select;
	}
}
</style>

<label for="fancybread">Favourite bread</label>
<select id="fancybread">
	<option>---</option>
	<option>pita</option>
	<option>naan</option>
	<option>Mohnbrötchen</option>
</select>
						

Removing the picker icon

We can remove the picker icon by selecting the select's ::picker(icon):

							<style>
select#fancybread::picker-icon {
	display: none;
}

select#fancybread { 
	appearance: none;
	
	@supports (appearance: base-select) {
		&,
		&::picker(select) {
		appearance: base-select;
	}
}
</style>

<label for="fancybread">Favourite bread</label>
<select id="fancybread">
	<option>---</option>
	<option>pita</option>
	<option>naan</option>
	<option>Mohnbrötchen</option>
</select>
						

Adding bread images

With customisable select we are ok to add images in the options:

							<style>
select#fancybread,
select#fancybread::picker(select) { 
	appearance: base-select;
}

select#fancybread:open::picker(select) {
	display: flex;
	flex-direction: row;
}

select#fancybread::picker-icon, 
select#fancybread ::checkmark {
	display: none;
}

select#fancybread :checked {
	background-color: hotpink;
}
label {
  display: block;
}
</style>

<label for="fancybread">Favourite bread</label>
<select id="fancybread">
	<option value="pita">
	  <img 
		  src="../pita.png" 
			alt="pita" 
		  width="100" 
			aria-hidden="true"
		/>
		<span hidden>pita</span>
	</option>
	<option value="naan">
		<img 
		  src="../naan.png" 
			alt="naan" 
			width="100" 
			aria-hidden="true" 
		/>
		<span hidden>naan</span>
	</option>
	<option value="mohn">
		<img 
		  src="../mohn.png" 
			alt="Mohnbrötchen" 
			width="100"  
			aria-hidden="true" 
		/>
		<span hidden>Mohnbrötchen</span>
	</option>
</select>

<script>
var select = document.querySelector('#fancybread');

select.addEventListener('change', (event) => console.log(event.target.value));
</script>
						

Browser support