如何使用CSS选择器定位Shiny for Python的输入组件？

我太懂这种“能改一部分样式，另一部分死活不生效”的憋屈感了！你现在的问题核心是用错了CSS选择器——Shiny for Python生成的输入组件，类名和你写的.input-text、.input-numeric完全不匹配，自然不会生效。

先搞清楚：Shiny输入组件的实际HTML结构 #

Shiny会给每个输入组件生成带唯一ID的元素（就是你定义的input_text1、input_numeric1这些名称），同时会套上特定的容器类。你可以用浏览器的F12开发者工具（右键输入框→“检查”），直接查看组件对应的HTML标签和类名，这是找对选择器最快的方法。

给你两种修改方案： #

方案1：用ID选择器（精准定位单个组件）

因为每个输入的ID是你自己定义的，唯一且明确，用ID选择器最不容易出错。比如：

ui.tags.style(
    ".card-header { color:white; background:#2A2A2A !important; }",
    /* 文本输入框：文字红，调整高度 */
    "#input_text1 { color: red; height: 35px; }",
    /* 数字输入框：文字红，背景浅灰 */
    "#input_numeric1 { color: red; background: #f0f0f0; }",
    /* Selectize输入框：文字红 */
    "#input_selectize1 + .selectize-control .selectize-input { color: red; }",
    /* 开关组件：标签文字红 */
    "#input_switch1 + .shiny-input-switch-label { color: red; }",
    /* 按钮：红底白字 */
    "#input_action_button1 { background-color: red; color: white; border: none; }"
)

方案2：用类选择器（批量修改同类型组件）

如果想给所有同类型的输入统一加样式，可以用组件的通用类或标签类型：

ui.tags.style(
    ".card-header { color:white; background:#2A2A2A !important; }",
    /* 所有文本输入框 */
    ".shiny-input-container input[type='text'] { color: red; }",
    /* 所有数字输入框 */
    ".shiny-input-container input[type='number'] { color: red; }",
    /* 所有Selectize输入框 */
    ".selectize-control .selectize-input { color: red; }",
    /* 所有开关组件的标签 */
    ".shiny-input-switch-label { color: red; }",
    /* 所有操作按钮 */
    ".btn { background-color: red; color: white; }"
)

完整修改后的代码示例 #

把style部分替换后，你的完整app_ui应该是这样的：

from shiny import App, render, ui, reactive
from pathlib import Path


app_ui = ui.page_fillable(
    ui.panel_title(
        ui.row(
        ui.column(12, ui.h1("title1")),
        )
    ),
    ui.layout_sidebar(
        ui.sidebar(
            ui.input_text("input_text1", "input_text1", value=""),
            ui.input_selectize("input_selectize1", "input_selectize1", choices=["1", "2"]),
            ui.input_numeric("input_numeric1", "input_numeric1", value=4),
            ui.input_switch("input_switch1", "input_switch1", value=False),
            ui.input_action_button("input_action_button1", "input_action_button1"),
            width="350px"
        ),
        ui.layout_columns(
            ui.card(
                ui.card_header("card_header1"),
                ui.output_data_frame("card1"),
                full_screen=True
            ),
            col_widths=12
        )
    ),
    ui.tags.style(
        ".card-header { color:white; background:#2A2A2A !important; }",
        /* 单个组件的精准样式 */
        "#input_text1 { color: red; height: 35px; }",
        "#input_numeric1 { color: red; background: #f0f0f0; }",
        "#input_selectize1 + .selectize-control .selectize-input { color: red; }",
        "#input_switch1 + .shiny-input-switch-label { color: red; }",
        "#input_action_button1 { background-color: red; color: white; border: none; }"
    )
)


def server(input, output, session):

    @reactive.event(input.input_action_button1)
    def reactive_function1():
        pass

    @output
    @render.data_frame
    def card1():
        return reactive_function1()

src_dir = Path(__file__).parent / "src"
app = App(app_ui, server, static_assets=src_dir)

小提醒： #

• 不要随便用!important，除非真的需要覆盖Shiny的默认样式优先级（比如你的card-header用了是对的，因为Shiny有默认的card-header样式）。
• 如果你设height:0px，组件会完全看不见，调试的时候别用这么极端的值哦~

备注：内容来源于stack exchange，提问作者gernophil