python 制作的下拉菜单可以在 HTML / CSS 中编辑吗？

Question

所以基本上我使用这种方法创建了一个下拉菜单：控制器：        all_useroptions = []        for opt in db().select(db.useroptions.ALL):            all_useroptions.append(OPTION(opt.symbol, _value=opt.id))        opt_sel = SELECT(*all_useroptions, _name='opt_id', value=request.vars.opt_id)HTML： {{=opt_sel}}是否可以编辑菜单的“下拉”部分？我可以使用 CSS 编辑菜单的“按钮”：        #opt_id {        color: rgb(105,105,105);        padding: 10px 10px;        text-align: center;        border-radius: 5px;        display: inline-block;        font-size: 20px;        margin: 10px 5px;        cursor: pointer;        position: relative;        min-width: 160px;        }但这只会改变按钮，不会改变我的菜单。我想通过更改菜单的形状、颜色和高度并在选项之间添加一些文本来使菜单“更漂亮”。有人知道该怎么做吗？

Answer 1

在输出到页面的最终 HTML 中（检查 python 脚本生成的页面以查找其内容），您可以添加自定义 js 片段以进一步修改 HTML，根据初始代码输出动态修改元素。

    ...template code above that contains yours {{=opt_sel}}...

    <!-- javascript snippet you add at bottom of page to change html above -->

    <script>

       document.querySelectorAll(".classOnABunchOfElementsMadeByOptSel > li").style.background = "red";

       document.querySelector("#secondElementMadeByOptSel").style.margin = "20px";

    </script>

Answer 2

只需将 _class 添加到 OPTION helper 参数列表中：

all_useroptions = []

for opt in db().select(db.useroptions.ALL):

    all_useroptions.append(OPTION(opt.symbol, _value=opt.id, _class='prettier'))

opt_sel = SELECT(*all_useroptions, _name='opt_id', value=request.vars.opt_id)

并根据您的喜好创建一个“更漂亮”的 CSS 定义

    *Named arguments that start with an underscore are interpreted as HTML tag attributes (without the underscore)*