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)*