样式选择表单(下拉列表)

时间:2011-01-05 02:17:52

标签: javascript html css

我搜索了谷歌和各种网页设计网站,并且没有太多运气找到关于在表单中设计一个漂亮的选择下拉框的优雅解决方案的信息。

我的文字输入字段非常大(高度为50像素),我也希望从选择框中获得相同的高度/感觉。

我担心的是有两组以上的图像用于匹配每个系统本机表单元素。有什么建议吗?

感谢。

1 个答案:

答案 0 :(得分:2)

出于可用性和可访问性的原因,请勿使用<select>元素以外的任何内容。使用CSS可以根据用户浏览器允许的程度显示它。

如果您尝试“创建”自己的选择,或使用其他人的库,您几乎肯定会创建一些看起来更漂亮的东西(更符合您网站的非标准设计)但对用户来说不那么明显(更重要的是)并不像普通选择那样工作。

例如,当我上次检查(几年前)时,如果您打开一个选择并开始输入:

  • 在IE / Windows中重复输入相同的字符,选择以该字母开头的连续元素(例如,反复按“c”可能先选择“柬埔寨”,然后选择“喀麦隆”,然后选择“加拿大”)< / em>的;输入另一个字母,甚至快速,选择以另一个字母开头的第一个项目(例如,键入'can'将首先选择“Cambodia”然后选择“Afghanistan”然后选择“Namibia”)

  • 在Safari / Mac中,在拼写时快速选择选项(例如,输入'can'首先选择“Cambodia”然后选择“Cambodia”然后选择“Canada”)

您是否要编写JavaScript代码来回应此行为,检测平台?你是否会支持Windows和OS X之间的差异,还有各种Linux窗口风格?您是否要在每次发布新操作系统版本时检查行为以相应地更新脚本?

你确定在元素聚焦时你能正确处理鼠标滚轮吗?对于每个GUI变体?

您的伪选择是否适用于表单验证?标签聚焦怎么样?那么accesskey快捷方式呢?

请,请使用真实的<select>元素,并接受您可能有的限制。