我正在处理涉及“选择”下拉列表的网页。我的工作是使其“功能性”，即显示正确的内容，同时使其“合理美观”。网页设计师稍后会对“外观和感觉”进行润色。
让我感到困惑的是，没有很好的方法来使用css设置Html Select元素的样式。我发现的所有框架/解决方案都涉及以下内容：
隐藏原始选择元素
使用<div> <span>或<ul> <li>的组合来模拟原生选择框
<div> <span>模拟器。我必须编写一个selenium客户端来测试网页的行为。
如果我将其编写为针对原生选择框进行测试，则使用上面显示的3个步骤进一步设置下拉列表将会破坏测试，因为selenium不允许我单击隐藏元素。
如果我现在应用样式，并编写selenium客户端以单击模拟<div><span>，我也将面临将来破坏测试的风险。因为网页设计师可能会选择一种不同的方式来设置选择框的样式，而今天我正在测试的元素可能会从页面中删除。
我想知道以前是否有人有类似的经历，以及解决这类问题的最佳做法是什么。
答案 0 :(得分：1)
我发现你有两个选择（你已经遇到过）。
本机组件的最小样式。有些浏览器允许你做一些样式，但主要是像选择框的高度和宽度，没有什么太花哨。这可能是避免让事情破裂的更好选择，因为它是原生的并且依赖于浏览器而不是插件。
或者你可以使用一个插件，因为你发现它做了一些奇特的工作来在元素顶部创建一个div。但是有各种各样的插件，它们之间有不同的里程数。
在当前项目中，我需要一个自定义选择框。我的脚本所做的是在选择框后面创建一个div并将选择框变为不透明度：0。用户认为他们正在点击花式div但实际上正在点击它前面的选择框（即使它不可见） 。当他们点击它时会弹出常规选择下拉列表。很酷。最好的部分是它只在页面加载时使用javascript来创建div，其他一切都是本机控件。如果您需要有关此方法的更多信息，我可以提供一个示例，但这是我在网上找到的。所以也许你也看过了。