jquery - Material 设计选择下拉菜单

Question

我正在尝试创建反射(reflect) Google Material 设计原则的不同表单元素。我注意到我真的无法在任何地方找到下拉示例。我能找到的最接近的是 Polymer Project .

我的问题是:

1. Google 是否回避将这种特殊的表单输入类型与 Material Design 结合使用？
2. 任何人都可以指导我如何创建与链接中显示的类似的选择表单输入。我知道链接中显示的不是表单输入本身，但对于表单 <select> 肯定是可能的.

我曾尝试使用 CSS 转换普通选择，但这似乎非常棘手。另一种选择是使用 Javascript 和无序列表重新创建选择，但此解决方案对用户(设备和开发人员)的友好程度如何？

Answer 1

* {
    box-sizing: border-box;
}
.dropdown {
    display:inline-block;
    margin:30px;
    position: relative;
    padding:0;
    border:0;
    border-radius:5px;
    font-size:24px;
    font-weight:400;
    background:#26A69A;
    color:#FFF;
    box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
}
.dropdown > input{
    display:none;
    position:fixed;
    z-index:-2;
}
.dropdown > label{
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
.drop-ttl{
    font-weight:400;
    padding:5px 20px;
}
.dropdown ul {
    width:100%;
    font-weight:400;
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    text-align:center;
    list-style-type:none;
    background:#FFF;
    color:#26A69A;
    box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
    border-radius:5px;
}
.dropdown ul >li{
    padding:5px 20px;
}
.dropdown ul > li > a{
    color:inherit;
    outline:0;
    text-decoration:none;
    cursor:pointer;
}
.dropdown ul > li:hover{
    background:#DEDEDE;
}
input[type="checkbox"]:checked ~ label > ul {
    display:none;
}

<div class="dropdown">
    <input id="checkbox1" type="checkbox" name="checkbox" checked />
    <label for="checkbox1">
        <div class="drop-ttl">Dropdown</div>
        <ul>
            <li><a>First</a></li>
            <li>Second</li>
            <li>Third</li>
            <li>Fourth</li>
        </ul>
    </label>
</div>

这是一个很好的纯 css Material 下拉菜单。如果有帮助，+1。