Apply Focus Effect to SelectCurrent Border

[Walterhart]

Hello!

Someone helped me solve a problem, so I'm asking for help one more time. My question is: how can I apply a focus effect on the SelectCurrent sub-widget's border when it is currently focused? I kinda have the effect work on hover (doesnt cover whole widget) but it does not work on focus. Also, if you feel like it, could you explain why I'm having issues with hovering? When I hover inside the widget, the effect doesn't work unless I'm near the border. Here a link to the previous question for more information:

from textual.app import App, ComposeResult
from textual.widgets import Select , Input
from textual.containers import  Container


class SelectApp(App[None]):
    CSS = """

    Screen{
        align: center middle;
    }
    Container{
        padding: 1 0;
        height: auto;
        color: white;
        width: 100;
    }
    Input{
        border: wide white;
        padding: 1 0;
        height: auto;
    }
      Select > SelectCurrent {
        border: wide white;
        padding: 1 0;
        min-height: 3;
        height: auto;
    }
       Input:hover, SelectCurrent:hover,SelectCurrent:focus, Input:focus{
        border:wide  #0178D4;
    }
    """

    def on_mount(self) -> None:
        self.query_one("SelectCurrent").border_title = "Rank"

    def compose(self) -> ComposeResult:
        with Container():
            username_input = Input(placeholder="Enter your username", id="username", classes="username-border")
            username_input.border_title = "Username"
            yield username_input

            yield Select([("Foo", "bar")])


if __name__ == "__main__":
    SelectApp().run()

[TomJGooding]

I think the problem is that its actually the Select widget that recieves focus, so you just need to change your CSS to something like:

Select:focus > SelectCurrent {
    border: tall $border;
}