How to setting no border from Select

[Yurii-huang]

I want to show him to the height of a row, the border is present by default, it's not what I want. I've tried using "border:none and height = 1" and it doesn't seem to show the text

from textual.app import App, ComposeResult
from textual.events import Focus
from textual.containers import Horizontal, Vertical
from textual.validation import Function, Number, ValidationResult, Validator, Regex, Length
from rich.console import Console, ConsoleOptions, RenderableType, RenderResult
from textual.widgets import Static, Input, Label, Button, Select
from rich.text import Text, TextType
from textual.widgets._button import ButtonVariant



class OptionListApp(App[None]):
    CSS ="""
    Screen {
        background: darkblue;
        border: double darkblue;
        layers: above below;
    }
    Select {
        width: auto;
        min-width: 15;
        height: 1;
        background: darkblue;
        color: $text;
        border: none;
        text-align: center;
        content-align: center middle;
        text-style: bold;
    }
    Select:focus {
        border: none;
    }
    """
    def compose(self) -> ComposeResult:
        yield Select(options=[("Disable", 0), ("Enable", 1)], prompt="Disable")
        return super().compose()

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

[davep]

If I'm reading you correctly, what you want is this:

    SelectCurrent, SelectCurrent:focus {
        border: none;
    }

A Select is a compound widget made up of two parts and it's the SelectCurrent sub-widget that has the style you look to be trying to remove.

Select is one of the widgets where we need to improve the documentation to make this clear.

[jessebot]

Sorry to bother, but could I ask how you change this pictured focused border to another color (for instance, red)?

I tried the following and it didn't work:

from textual.app import App, ComposeResult
from textual.widgets import Select


class OptionListApp(App[None]):
    CSS ="""
    SelectCurrent:focus {
        border: solid red;
    }
    """
    def compose(self) -> ComposeResult:
        yield Select(options=[("Disable", 0), ("Enable", 1)], prompt="Disable")
        return super().compose()

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

To be clear, I only want to change the border when focused.

[TomJGooding]

I think something like this should work - just remove the second part if you don't want the red border when the select is expanded.

    CSS = """
    Select:focus > SelectCurrent {
        border: tall red;
    }

    Select.-expanded > SelectCurrent {
        border: tall red;
    }
    """

[jessebot]

yep, that solved it! Thank you, @TomJGooding !