Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/customizable-select/select-base-appearance-ordering.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8" />
<title>CSS pseudo element ordering with appearance: base-select</title>
<link rel="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" />
<link
rel="help"
/>
<link rel="match" href="select-base-appearance-ordering-ref.html" />
<style>
select {
width: 100%;
display: flex;
border-radius: 0;
font: inherit;
color: inherit;
background: transparent;
border: 1px solid orange;
padding: 0;
margin: 0;
gap: 1rem;
align-items: center;
}
.base {
appearance: base-select;
appearance: base;
}
select::before {
content: "Before";
border: 1px solid lime;
}
select::after {
content: "After";
border: 1px solid hotpink;
}
button {
border: 100px solid red;
}
option {
display: flex;
padding: 0;
margin: 0;
gap: 1rem;
align-items: center;
}
::checkmark {
content: "Checkmark";
border: 1px solid navy;
height: 30px;
}
::picker(select) {
position: static;
appearance: base-select;
appearance: base;
display: inline-block;
border: 1px solid teal;
}
::picker {
position: static;
appearance: base-select;
appearance: base;
display: inline-block;
padding: 0;
margin: 0;
border: 1px solid teal;
}
::picker-icon {
content: "PickerIcon";
border: 1px solid rebeccapurple;
margin: 0;
}
</style>
<select class="base">
<button>Button</button>
<option>Option</option>
</select>