From 3b3558865ca4c1b8cea7aef31e43a602c6c7993d Mon Sep 17 00:00:00 2001
From: Bastiaan van der Plaat <bastiaan.v.d.plaat@gmail.com>
Date: Sun, 10 Dec 2023 19:59:25 +0100
Subject: [PATCH] LibWeb: Improve select element CSS stylebility

---
 Userland/Libraries/LibWeb/CSS/Default.css        |  8 ++++++--
 .../Libraries/LibWeb/HTML/HTMLSelectElement.cpp  | 16 +++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/Userland/Libraries/LibWeb/CSS/Default.css b/Userland/Libraries/LibWeb/CSS/Default.css
index 4ca097c28f4..6fd4d66b533 100644
--- a/Userland/Libraries/LibWeb/CSS/Default.css
+++ b/Userland/Libraries/LibWeb/CSS/Default.css
@@ -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;
 }
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLSelectElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLSelectElement.cpp
index 8a4cabaae19..3b0578e15cb 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLSelectElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLSelectElement.cpp
@@ -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();