<分区>
我的站点将有一个用于选择颜色的选择元素。我宁愿有一个漂亮的按钮，上面写着“选择一种颜色”，当你点击它时，它会打开下拉菜单。
所以我的想法是有一个按钮 DIV，其中包含 Select 元素，我将 Select 元素放在按钮的顶部，但将其不透明度设置为 0，这样您就看不到它了。然后，当您单击该按钮时，下拉菜单将正常打开...
<div class='color-button'>Pick a Color
<select name='color' id='colorpicker' class='hide-color-select'>
//bunch of color options here
</select>
</div>
div.color-button {
width: 200px;
height: 40px;
background: #eeeeee;
}
.hide-cat-select {
width: 200px;
height: 40px;
position: absolute;
left: 0px;
opacity: 0.01;
}
注意:当不透明度设置为 0 时，它实际上不允许您单击以打开 Select 元素，但只要它不为零，它就可以。所以 0.01 不透明度仍然“隐藏”它但允许点击。
对此有何想法？这感觉很老套，所以如果有人有更好/更有效的方法来处理这个问题的建议，我会洗耳恭听。
谢谢!
最佳答案
<div class='color-button'>Pick a Color
<select name='color' id='colorpicker' class='hide-color-select'>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="black">black</option>
</select>
</div>选择下拉选项像这样使用
关于html - 如何从 View 中隐藏 Select 元素，但在单击另一个元素时仍然打开下拉选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40046211/