设计表单元素(选择、复选框、单选等)?
使用 css 设计表单元素可能会出现问题,因为每个浏览器以不同的方式渲染标签(就像 safari 渲染复选框一样)。
好吧,让我们暂时忽略 Safari,皮肤输入和按钮相当简单,但如何完全皮肤选择、复选框、单选等。
我听说过一些 JS 框架,例如 EXTJS或者MooTools可以做到这一点,但我不需要大规模的框架解决方案,只是独立的JS,我们可以根据需要修改皮肤,请不要使用JQuery解决方案,因为我不使用它。
有什么想法可以在不使用某些特定框架的情况下做到这一点吗?
Styling form elements using css can be problematic since every browser render tag in different way (just like when safari render checkbox).
Okay lets ignore safari for a while, skinning input and button are rather easy but how to completely skin select, checkbox, radio, etc.
See this pages:
Checkbox skinning
Select skinning
Radio skinning
I've heard some JS framework such as EXTJS or MooTools can do that, but i don't want a large scale framework solution, just independent JS and we can modify the skin as we like, please no JQuery solution, since i don't use it.
Any idea to do that without using some specific framework?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果您想要完全控制,那么您通常必须完全替换浏览器控件,并用其他元素、样式表和脚本来伪造它们。
如果你不想使用框架,那么基本上可以归结为DIY。
也就是说,整个概念有几个问题。
就我个人而言,我通常会尝试让表单控件坚持系统默认值,而不是尝试偏离它们。 给用户他们所期望的。
If you want complete control, then you generally have to replace the browser controls completely and fake them with other elements, stylesheets and scripting.
If you don't want to use a framework, then it basically comes down to DIY.
That said, the whole concept have a couple of problems.
Personally, I'd generally try to let form controls stick to the system defaults and not try to deviate from them. Give users what they expect.
如今,有很多 JavaScript 解决方案允许对表单元素样式进行广泛的自定义。 谷歌很快就找到了一些不错的框架:
也许最著名的是 Bootstrap CSS 框架:
https://getbootstrap.com/docs/4.0/components/forms
https://www.psd2html.com/js-custom-forms (jQuery 插件)
https://purecss.io/forms
https://github.com/select2/select2
https://github.com/harvesthq/chosen
复选框/Radios:
< /p>
今天,您可以在 Codepen.com 上找到多种表单元素样式
旧答案(来自 2009 年 5 月 16 日):
Today there are quite many javascript solutions which allow a wide range of customization for form elements styling. A quick google came up with a few nice ones:
Perhaps the best known is the Bootstrap CSS framework:
https://getbootstrap.com/docs/4.0/components/forms
https://www.psd2html.com/js-custom-forms (jQuery plugin)
https://purecss.io/forms
https://github.com/select2/select2
https://github.com/harvesthq/chosen
Checkboxes/Radios:
Today you can find many kinds of form element styling on Codepen.com
Old answer (from May 16 '09):