javascript - 样式选择选项最佳实践

Question

我正在处理一个涉及“选择”下拉列表的网页。我的工作是让它“功能化”，即显示正确的内容，同时让它“合理好看”。网页设计师稍后会来完善“外观和感觉”。

令我困惑的是，没有什么好的方法可以仅使用 css 来设置 Html Select 元素的样式。我发现的所有框架/解决方案都涉及以下内容:

• 隐藏原来的select元素

• 使用 <div> <span> 的组合或 <ul> <li>模拟原生选择框

• 插件javascript代码同步隐藏native中的数据选择框和 <div> <span>模拟器。

我必须编写一个 selenium 客户端来测试网页的行为。

如果我编写它来针对 native 选择框进行测试，则使用上面显示的 3 个步骤进一步设置下拉列表样式将破坏测试，因为 selenium 不允许我单击隐藏元素。

如果我现在应用样式，并编写 selenium 客户端来单击模拟 <div><span> ，我也冒着考不上的风险。因为网页设计师可能会在以后选择不同的方式来设置选择框的样式，而我今天要测试的元素可能会从页面中删除。

我想知道以前是否有人有过类似的经验，解决此类问题的最佳做法是什么。

Answer 1

我发现您有两个选择(您偶然发现了)。

native 组件上的样式最少。一些浏览器允许你做一些样式，但主要是选择框的高度和宽度，没有什么太花哨的。这可能是避免出现问题的更好选择，因为它是 native 的并且依赖于浏览器而不是插件。

或者您可以使用一个插件，因为您发现它做了一些奇特的工作来在元素顶部创建一个 div。但是有各种各样的插件，它们之间的里程数各不相同。

在当前元素中，我需要一个自定义选择框。我的脚本所做的是在选择框后面创建一个 div 并将选择框变为不透明度:0。用户认为他们正在单击花哨的 div 但实际上正在点击它前面的选择框(即使它不可见) .当他们单击它时，它会弹出常规选择下拉列表。很酷。最好的部分是它只在页面加载时使用 javascript 来创建 div，其他一切都是 native 控件。如果您需要有关这种操作方式的更多信息，我可以提供一个示例，但这是我在网上找到的。所以也许你也看到了。