HTML 5 自定义控件

Question

是否可以使按钮和滚动条等标准控件看起来不同？例如，我有自己的正常和按下按钮状态的图像，如何让按钮使用它们？

如果我只是为普通样式和按下样式设置背景，按钮仍然具有其初始形式，这与我的图像形式不匹配。

那么，滚动条呢？它们很复杂，并且每个州都包含多个图像。

问候，

Answer 1

对于表单控件；利用 CSS 中的 :active 和 :hover 伪类，并用图像替换按钮和表单元素的背景。在 this excellent tutorial ，系统会指导您通过这些技术使用 HTML5 和 CSS3 创建自定义搜索表单。

对于滚动条，要么完全避免改变它们的样式(尤其是当您谈论视口(viewport)滚动条时，因为它们是浏览器的一部分，而不是您的网站，并且用户希望它们看起来像一定的方式。如果你必须改变它们，只需使用渐进增强的 javascript(可能使用 jQuery)首先隐藏滚动条(设置 overflow: hidden)，然后插入 button和 input type="range" (或非 HTML5 元素，如果浏览器支持很重要)到 DOM 中，按照您想要的方式设置它们的样式并 Hook 它们的 click 事件以滚动任何需要滚动的。有many jQuery plugins that do this for you。