样式选择选项最佳做法

Question

我正在处理涉及选择下拉列表的网页。我的工作是使其“功能性”，即展示正确的内容，同时使其“合理美观”。网页设计师稍后会来打磨“外观和感觉”。

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

• 隐藏原来的选择元素

• 使用<div> <span>或<ul> <li>组合来模拟天然选择框

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

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

如果我编写它来测试本机选择框，使用上述3个步骤进一步设计下拉式样将打破测试，因为硒不允许我点击隐藏的元素。

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

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

Answer 1

我发现你有两个选择（你已经打到）。

本机组件上的最小样式。一些浏览器让你做一些样式，但主要是像选择框的高度和宽度的东西，没有太花哨。这可能是更好的选择，因为它是本机的，并且依赖于浏览器而不是插件，所以避免让事情中断。

或者你可以使用一个插件，因为你发现做一些奇特的工作来在元素上创建一个div。但是，它们之间有各种不同的插件。

在当前的项目中，我需要一个自定义选择框。我的脚本所做的是在选择框后面创建一个div，并将选择框变为opacity：0.用户认为他们正在点击幻想div，但实际上正在点击它前面的选择框（即使它不可见） 。当他们点击它时，会弹出常规选择下拉列表。很酷。最好的部分是，它只在页面加载时使用javascript来创建div，其他一切都是原生控件。如果你需要更多的信息来做这件事，我可以提供一个例子，但这是我在网上找到的。所以也许你也看过了。