How can I remove the highlight of a listitem?

[YoonSungHyun-Git]

Hello,

I am developing a custom list item by adding a label and button to the list item.
This is a program that expands when you click on the list and creates a button.

However, when I click on the listview, the label and button are covered with blue. I wonder how to remove this.

from textual import on
from textual.app import App
from textual.containers import Vertical, VerticalScroll
from textual.widgets import Button, Label, ListItem, ListView, Input


class ScopeItem(App):
    CSS = """
    #scope_container {
        layout:grid;
        grid-size: 6;
        height: auto;
        padding: 1;
        align: left middle;
        border: greenyellow;
    }

    #scope_container > #ip_scope_name {
        width: 1fr;
        column-span: 5;
    }

    #scope_container > #btn_scope_add {
        width: 1fr;
    }

    ListView {
        height: auto;
        padding-bottom: 1;
    }

    ListItem {
        layout:grid;
        grid-size: 6;
        height: auto;
        padding: 1;
        align: left middle;
    }
    ListItem > Label {
        height: auto;
        width: 1fr;
        column-span: 3;
    }
    ListItem > Button {
        height: auto;
        width: 1fr;
    }

    Collapsible{
        border: $panel thick ;
        background:$panel;
    }

    CollapsibleTitle {
        width: 1fr;
        height: 3;
        background: $boost;
        content-align: left middle;
    }

    .install {
        display: none
    }
    .edit {
        display: none
    }
    .delete {
        display: none
    }
    .active {
        display: block;
    }
    """

    def __init__(self) -> None:
        super().__init__()
        self.files = ['1.yml', '2.yml']

    def compose(self):
        with Vertical(id="scope_container"):
            yield Input(placeholder="Enter new scope", id="ip_scope_name")
            yield Button(f"Add", id="btn_scope_add", variant="primary")

        with VerticalScroll(id="scrollable_list"):
            general_list = ListView(
                *[
                    ListItem(
                        Label(f":page_facing_up: {file}", markup=False),
                        Button.success(
                            "Install", id=f"btn-install-{file.replace('.', '_')}", classes="install"
                        ),
                        Button.warning(
                            "Edit", id=f"btn-edit-{file.replace('.', '_')}", classes="edit"
                        ),
                        Button.error(
                            "Delete", id=f"btn-del-{file.replace('.', '_')}", classes="delete"
                        ),
                        id=f"file-{file.replace('.', '_')}",
                    )
                    for file in self.files
                ],
                initial_index=None, 
            )
            yield general_list

    @on(ListView.Selected)
    def get_preview_file_path(self, event: ListView.Selected):
        self.app.file_to_show = event.list_view.highlighted_child.id.split("-")[1]
        
        active_button = event.list_view.highlighted_child.query(Button)

        if active_button and len(active_button) > 0:
            is_active = "active" in active_button[0].classes
            
            if is_active:
                active_button.remove_class("active")
            else:
                self.query(Button).remove_class("active")
                active_button.add_class("active")
            

if __name__ == "__main__":
    app = ScopeItem()
    app.run()

[darrenburns]

I think the default rules for ListView styling are too broad. I've created a PR to address this here.