Fixing Select widget styling

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",
             )

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 {