HTML 5自定义控件

时间:2011-07-15 16:10:44

标签: html5 controls

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

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

然后,滚动条怎么样?它们很复杂,每个州都包含多个图像。

此致

2 个答案:

答案 0 :(得分:3)

表格控件;在CSS中使用:active:hover伪类,并用图像替换按钮的背景和表单元素。在this excellent tutorial中,您可以使用HTML5和CSS3通过这些技术创建自定义搜索表单。

对于滚动条,要么完全避免改变它们的样式(特别是如果你正在谈论视口滚动条,因为它们是浏览器的一部分,而不是你的网站,并且用户希望它们看起来像如果您必须更改它们,只需使用逐步增强的javascript(可能使用jQuery)首先隐藏滚动条(设置overflow: hidden),然后插入buttoninput type="range"(或非HTML5元素(如果浏览器支持很重要)进入DOM,按照您想要的方式设置样式并挂钩他们的click事件以滚动任何需要滚动的内容。有many jQuery plugins that do this for you

答案 1 :(得分:2)

通常,您必须对这些控件进行div分层或从头开始创建控件。看看JQuery UI如何显示某些控件是一个开始理解如何完成它的好地方。简单的方法是只使用JQuery UI并使用themeroller或自定义css来设置控件的样式。要靠自己完成其中的一些任务并不容易。

http://jqueryui.com/