样式选择选项最佳做法

Question

我正在一个涉及“选择”下拉列表的网页上工作。 我的工作是使其“正常运行”，即显示正确的内容，同时使其“合理美观”。 一位网页设计师稍后会来完善“外观”。

让我感到困惑的是，没有一种很好的方法来仅使用CSS设置Html Select元素的样式。 我发现的所有框架/解决方案都涉及以下内容：

• 隐藏原始选择元素

• 使用<div> <span>或<ul> <li>来模拟本地选择框

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

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

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

如果我现在立即应用样式，并编写selenium客户端以单击模拟<div><span> ，那么将来也可能会有测试失败的风险。 因为网页设计师可能会在以后选择选择框样式的另一种方式，并且我今天要测试的元素可能会从页面中删除。

我想知道是否有人曾经有过类似的经历，以及解决此类问题的最佳实践是什么？

Answer 1

我发现您有两个选择（已被选中）。

本机组件上的样式最少。 一些浏览器允许您进行一些样式设置，但主要是选择框的高度和宽度之类的东西，没有什么花哨的。 由于它是本机并且依赖于浏览器而不是插件，因此它可能是避免发生问题的更好选择。

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

在当前项目中，我需要一个自定义选择框。 我的脚本要做的是在选择框后面创建一个div，然后将选择框设置为不透明：0。用户认为他们正在单击花哨的div，但实际上是在其前面点击了选择框（即使它不可见） 。 当他们单击它时，它会弹出常规选择下拉列表。 很酷 最好的部分是，它仅在页面加载时使用javascript创建div，其他所有都是本机控件。 如果您需要有关这样做的更多信息，我可以提供一个示例，但这是我在网上找到的。 所以也许您也看到了。