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-button-text-and-icon-clipping.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>appearance:base-select must not clip its button text or icon</title>
<link rel=match href="select-button-text-and-icon-clipping-ref.html">
<link rel=stylesheet href="/fonts/ahem.css">
<meta name=assert content="An appearance:base-select <select> should not have its button text or icon clipped, regardless of whether a button element is used.">
<style>
select {
appearance: base-select;
box-sizing: border-box;
width: 40px;
border: 0;
padding: 0;
font: 20px/1 Ahem;
color: black;
}
select::picker-icon {
content: "X";
color: red;
}
.hide-icon::picker-icon {
display: none;
}
</style>
<p><select><option>XXX</option></select>
<p><select><button><selectedcontent></selectedcontent></button><option>XXX</option></select>
<p><select class=hide-icon><option>XXX</option></select>
<p><select class=hide-icon><button><selectedcontent></selectedcontent></button><option>XXX</option></select>