From b34be61d13a314ca319119ce800521dd2716d892 Mon Sep 17 00:00:00 2001
From: Darren Burns <darrenb900@gmail.com>
Date: Mon, 28 Oct 2024 10:33:36 +0000
Subject: [PATCH] Fixing Select widget styling

---
 examples/theme_sandbox.py      |  7 +++----
 src/textual/widgets/_select.py | 32 +++++++++-----------------------
 2 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/examples/theme_sandbox.py b/examples/theme_sandbox.py
index 9445c634a..211d7c202 100644
--- a/examples/theme_sandbox.py
+++ b/examples/theme_sandbox.py
@@ -261,9 +261,11 @@ class ChangingThemeApp(App[None]):
 
         yield ThemeList(id="theme-list")
         with VerticalScroll(id="widget-list") as container:
-            container.border_title = "Widget Gallery"
             container.can_focus = False
 
+            yield Select(
+                [("foo", "foo"), ("bar", "bar"), ("baz", "baz"), ("qux", "qux")]
+            )
             with Collapsible(title="An interesting story."):
                 yield Label("Interesting but verbose story.")
 
@@ -283,9 +285,6 @@ class ChangingThemeApp(App[None]):
                 yield Button.error("Error 3")
                 yield Button.warning("Warning 4")
             yield Tabs("First tab", "Second tab", "Third tab", "Fourth tab")
-            yield Select(
-                [("foo", "foo"), ("bar", "bar"), ("baz", "baz"), ("qux", "qux")]
-            )
             yield MaskedInput(
                 template="9999-9999-9999-9999;0",
             )
diff --git a/src/textual/widgets/_select.py b/src/textual/widgets/_select.py
index d78a85a4b..a8d3a2897 100644
--- a/src/textual/widgets/_select.py
+++ b/src/textual/widgets/_select.py
@@ -45,22 +45,6 @@ class SelectOverlay(OptionList):
 
     BINDINGS = [("escape", "dismiss", "Dismiss menu")]
 
-    DEFAULT_CSS = """
-    SelectOverlay {
-        border: tall $border-blurred;
-        background: $surface;
-        color: $foreground;
-        width: 100%;
-        padding: 0 1;
-    }
-    SelectOverlay:focus {
-        background-tint: $foreground 5%;
-    }
-    SelectOverlay > .option-list--option {
-        padding: 0 1;
-    }
-    """
-
     @dataclass
     class Dismiss(Message):
         """Inform ancestor the overlay should be dismissed."""
@@ -110,7 +94,9 @@ class SelectCurrent(Horizontal):
 
     DEFAULT_CSS = """
     SelectCurrent {
+        border: tall transparent;
         color: $foreground;
+        background: $surface;
         width: 1fr;
         height: auto;
         padding: 0 2;
@@ -215,16 +201,14 @@ class Select(Generic[SelectType], Vertical, can_focus=True):
     Select {
         height: auto;
         color: $foreground;
-        background: $surface;
-        border: tall $border-blurred;
         
         .up-arrow {
             display: none;
         }
 
-        &:focus {
-            background-tint: $foreground 5%;
+        &:focus > SelectCurrent {
             border: tall $border;
+            background-tint: $foreground 5%;
         }
 
         & > SelectOverlay {
@@ -235,12 +219,14 @@ class Select(Generic[SelectType], Vertical, can_focus=True):
             overlay: screen;
             constrain: none inside;
             color: $foreground;
-            padding: 1 0;
-
+            border: tall $border-blurred;
+            background: $surface;
             &:focus {
-                border: wide $border;
                 background-tint: $foreground 5%;
             }
+            & > .option-list--option {
+                padding: 0 1;
+            }
         }
 
         &.-expanded {