如何做下拉框，如“更多操作”在Gmail中 [英] How to do drop-down box like "More action" in gmail

问题描述

我在Gmail收件箱页面中看到更多操作下拉框。
它在列表中有级别和一些禁用项。

I see the "More Action" drop-down box in gmail inbox page. It has levels and some disabled item in the list.

如何在HTML + CSS中执行此操作？

How to do that in HTML+CSS?

谢谢

推荐答案

您可以分组和停用HTML < select& 元素，而不诉诸使用JavaScript。类似以下内容应该工作：

You can group and disable elements in an HTML <select> element without resorting to the use of JavaScript. Something like the following should work:

<select name="foo">
    <optgroup label="Odds">
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="5">5</option>
    </optgroup>
    <optgroup label="Evens">
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="6" disabled="disabled">6</option>
    </optgroup>
</select>

Firebug中的一个简短检查显示，Google正在伪装他们的下拉框，和一些聪明的CSS。就个人而言，我认为采取正确的方法，并使其风格看起来更漂亮，比重新创造这里更好。

A brief inspection in Firebug shows that Google are faking their drop-down box with a whole bunch of HTML and some clever CSS. Personally, I think taking the "correct" approach and styling it to look prettier is a lot more readable than reinventing the wheel here.

这篇关于如何做下拉框，如“更多操作”在Gmail中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！