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

是否可以编辑菜单的 "dropdown" 部分？我可以使用 CSS 编辑菜单的 "button"：

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

但这只会更改按钮，不会更改我的菜单。我想通过更改其形状、颜色和高度并在选项之间添加一些文本来制作菜单 "prettier"。有人知道怎么做吗？

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>

见How do I change an HTML selected option using JavaScript?

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

Answer 2

只需将 _class 添加到 OPTION 帮助程序参数列表：

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)

并根据您的喜好创建 "pretier"css 定义

有关更多信息，请参阅 HTML 助手的 web2py 文档： http://web2py.com/books/default/chapter/29/05/the-views#HTML-helpers

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

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

Are python-made dropdown menus editable in HTML / CSS?

html

css

python

web2py