RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 15:27:34 +00:00
Code Issues Activity Actions

LibWeb: Add basic input range rendering

Browse source
This commit is contained in:
Bastiaan van der Plaat 2023-12-11 18:00:06 +01:00 • committed by Alexander Kalenik
parent d28c400fcb
commit 0f37e0ee89
7 changed files with 169 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

26
Userland/Libraries/LibWeb/CSS/Default.css
View file

@ -26,7 +26,7 @@ label {
}
/* FIXME: This is a temporary hack until we can render a native-looking frame for these. */
input:not([type=submit], input[type=button], input[type=reset], input[type=color], input[type=checkbox], input[type=radio]), textarea {
input:not([type=submit], input[type=button], input[type=reset], input[type=color], input[type=checkbox], input[type=radio], input[type=range]), textarea {
border: 1px solid ButtonBorder;
min-height: 16px;
width: attr(size ch, 20ch);
@ -70,6 +70,30 @@ option {
display: none;
}
/* Custom <input type="range"> styles */
input[type=range] {
display: inline-block;
width: 20ch;
height: 16px;
}
input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb {
display: block;
}
input[type=range]::-webkit-slider-runnable-track {
height: 4px;
margin-top: 6px;
background-color: hsl(217, 71%, 53%);
border: 1px solid rgba(0, 0, 0, 0.5);
}
input[type=range]::-webkit-slider-thumb {
margin-top: -6px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: hsl(0, 0%, 96%);
outline: 1px solid rgba(0, 0, 0, 0.5);
}
/* Custom <meter> styles */
meter {
display: inline-block;

8
Userland/Libraries/LibWeb/CSS/Selector.cpp
View file

@ -390,6 +390,10 @@ StringView Selector::PseudoElement::name(Selector::PseudoElement::Type pseudo_el
return "placeholder"sv;
case Selector::PseudoElement::Type::Selection:
return "selection"sv;
case Selector::PseudoElement::Type::SliderRunnableTrack:
return "-webkit-slider-runnable-track"sv;
case Selector::PseudoElement::Type::SliderThumb:
return "-webkit-slider-thumb"sv;
case Selector::PseudoElement::Type::KnownPseudoElementCount:
break;
case Selector::PseudoElement::Type::UnknownWebKit:
@ -426,6 +430,10 @@ Optional<Selector::PseudoElement> Selector::PseudoElement::from_string(FlyString
return Selector::PseudoElement { Selector::PseudoElement::Type::Placeholder };
} else if (name.equals_ignoring_ascii_case("selection"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::Selection };
} else if (name.equals_ignoring_ascii_case("-webkit-slider-runnable-track"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::SliderRunnableTrack };
} else if (name.equals_ignoring_ascii_case("-webkit-slider-thumb"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::SliderThumb };
}
return {};
}

2
Userland/Libraries/LibWeb/CSS/Selector.h
View file

@ -37,6 +37,8 @@ public:
ProgressBar,
Placeholder,
Selection,
SliderRunnableTrack,
SliderThumb,
// Keep this last.
KnownPseudoElementCount,