时间戳

首页 > 解决方案 > python 制作的下拉菜单可以在 HTML/CSS 中编辑吗？

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

问题描述

所以基本上我使用这种方法创建了一个下拉菜单：

控制器：

        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;
        }

但这只会改变按钮而不是我的菜单。我想通过改变菜单的形状、颜色和高度来使菜单“更漂亮”，并在选项之间添加一些文本。有人知道该怎么做吗？

标签： pythonhtmlcssweb2py

解决方案

在输出到页面的最终 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>

请参阅如何使用 JavaScript 更改 HTML 选定选项？

以及有关如何使用 javascript 修改 HTML 的更基本的入门知识： https ://www.w3schools.com/js/js_htmldom_elements.asp

推荐阅读