layout: Set color and text decoration on <select> elements by default (#38570)

This makes the default style for `<select>` elements match that of gecko
(https://searchfox.org/mozilla-central/rev/a1f4cb9fc03d81be41ca2ba81294592df784364d/layout/style/res/forms.css#217-243),
with some small modifications because servo does not have fancy things
like `color: -moz-ComboboxText;`.

Testing: Includes a new web platform test
Fixes: https://github.com/servo/servo/issues/37895

---------

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
This commit is contained in:
Simon Wülker 2025-08-14 16:17:48 +02:00 committed by GitHub
parent 99ce81cf64
commit 6e7226961b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 92 additions and 3 deletions

View file

@ -297,15 +297,54 @@ progress #-servo-progress-bar {
background-color: #7a3;
}
/* Mostly matches https://searchfox.org/mozilla-central/rev/a1f4cb9fc03d81be41ca2ba81294592df784364d/layout/style/res/forms.css#217-243 */
select {
background-color: lightgrey;
border-radius: 5px;
border: 1px solid gray;
padding: 0 0.25em;
/* Don't show a text cursor when hovering selected option */
cursor: default;
cursor: default; /* Don't change cursor when hovering */
margin: 0;
white-space: nowrap !important;
word-wrap: normal !important;
box-sizing: border-box;
user-select: none;
overflow: clip;
/* No text-decoration reaching inside, by default */
display: inline-block;
page-break-inside: avoid;
overflow-clip-box: padding-box !important;
padding-block: 1px;
font-family: sans-serif;
/* These styles are specific to single-select elements */
padding-inline: 4px;
color: black;
vertical-align: baseline;
appearance: auto;
}
/* Matches https://searchfox.org/mozilla-central/rev/a1f4cb9fc03d81be41ca2ba81294592df784364d/layout/style/res/forms.css#120-132 */
input,
textarea,
select,
button {
text-align: initial;
text-indent: initial;
text-shadow: initial;
text-transform: initial;
word-spacing: initial;
letter-spacing: initial;
/* Note that line-height is also reset for all these, via the font shorthand */
}
input[type="reset" i],
input[type="button" i],
input[type="submit" i],
button {
text-align: center;
}
slot {
display: contents;
}
}

View file

@ -357174,6 +357174,19 @@
],
{}
]
],
"select-text-decoration.html": [
"a697e0f7b0c3d3455b6595ee3064dbbe7baff22c",
[
null,
[
[
"/html/rendering/replaced-elements/the-select-element/select-text-decoration-ref.html",
"=="
]
],
{}
]
]
},
"the-textarea-element": {
@ -486570,6 +486583,10 @@
"select-multiple-re-add-option-via-document-fragment-ref.html": [
"cb66ddaaaf369479e59f6092d04633a2dc2baf6c",
[]
],
"select-text-decoration-ref.html": [
"41a039e988f17a0e8af5ad474f82828c4b8534ea",
[]
]
},
"the-textarea-element": {

View file

@ -0,0 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<select>
<option>Foobar</option>
</select>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Text decoration should not propagate into select elements by default</title>
<link rel="author" title="Simon Wülker" href="mailto:simon.wuelker@arcor.de">
<link rel="match" href="select-text-decoration-ref.html">
<link rel="help" href="https://github.com/servo/servo/issues/37895">
<style>
body {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<select>
<option>Foobar</option>
</select>
</body>
</html>