LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-20 09:49:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Improve select element CSS stylebility

Browse Source
This commit is contained in:
Bastiaan van der Plaat 2023-12-10 19:59:25 +01:00 committed by Andreas Kling
parent d025d207d9
commit 3b3558865c
Notes: sideshowbarker 2024-07-18 03:20:18 +09:00 
Author: https://github.com/bplaat
Commit: https://github.com/SerenityOS/serenity/commit/3b3558865c
Pull-request: https://github.com/SerenityOS/serenity/pull/22247
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Userland/Libraries/LibWeb/CSS/Default.css
View File

@ -47,14 +47,14 @@ input::placeholder {
color: GrayText;
}
button, input[type=submit], input[type=button], input[type=reset] {
button, input[type=submit], input[type=button], input[type=reset], select {
padding: 1px 4px;
background-color: ButtonFace;
border: 1px solid ButtonBorder;
color: ButtonText;
}
button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover {
button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, select:hover {
/* FIXME: There isn't a <system-color> keyword for this, so this is a slightly lightened
* version of our light ButtonFace color. Once we support `color-scheme: dark`
* we'll need to use a different color for that.
@ -62,6 +62,10 @@ button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=res
background-color: #e5e0d7;
}
select {
padding-right: 2px;
}
option {
display: none;
}

16
Userland/Libraries/LibWeb/HTML/HTMLSelectElement.cpp
View File

@ -344,23 +344,25 @@ void HTMLSelectElement::create_shadow_tree_if_needed()
auto border = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
MUST(border->set_attribute(HTML::AttributeNames::style, R"~~~(
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 4px;
border: 1px solid ButtonBorder;
background-color: ButtonFace;
)~~~"_string));
)~~~"_string));
MUST(shadow_root->append_child(border));
m_inner_text_element = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
MUST(m_inner_text_element->set_attribute(HTML::AttributeNames::style, R"~~~(
flex: 1;
)~~~"_string));
)~~~"_string));
MUST(border->append_child(*m_inner_text_element));
// FIXME: Find better way to add chevron icon
auto chevron_icon_element = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
MUST(chevron_icon_element->set_inner_html("<svg style=\"width: 16px; height: 16px;\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" /></svg>"sv));
MUST(chevron_icon_element->set_attribute(HTML::AttributeNames::style, R"~~~(
width: 16px;
height: 16px;
margin-left: 4px;
)~~~"_string));
MUST(chevron_icon_element->set_inner_html("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" /></svg>"sv));
MUST(border->append_child(*chevron_icon_element));
update_inner_text_element();