设计表单元素(选择、复选框、单选等)?

发布于 2024-07-19 09:10:27 字数 611 浏览 7 评论 0原文

使用 css 设计表单元素可能会出现问题,因为每个浏览器以不同的方式渲染标签(就像 safari 渲染复选框一样)。

好吧,让我们暂时忽略 Safari,皮肤输入和按钮相当简单,但如何完全皮肤选择、复选框、单选等。

请参阅此页面:
复选框外观
选择换肤
Radio 换肤

我听说过一些 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

爱给你人给你 2024-07-26 09:10:27

如果您想要完全控制,那么您通常必须完全替换浏览器控件,并用其他元素、样式表和脚本来伪造它们。

如果你不想使用框架,那么基本上可以归结为DIY。

也就是说,整个概念有几个问题。

  1. 尝试让控件按照用户期望的方式运行(通过单击、双击、三次单击、右键单击、拖动、箭头键、控制键等给出输入)是困难
  2. 控件的外观可能与用户期望的不一样。

就我个人而言,我通常会尝试让表单控件坚持系统默认值,而不是尝试偏离它们。 给用户他们所期望的。

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.

  1. Trying to get the controls to behave how the user expects (given input from clicking, double clicking, triple clicking, right clicking, dragging, arrow keys, the control key, etc, etc, etc) is hard.
  2. The controls might not look as the user expects.

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.

无远思近则忧 2024-07-26 09:10:27

如今,有很多 JavaScript 解决方案允许对表单元素样式进行广泛的自定义。 谷歌很快就找到了一些不错的框架:

今天,您可以在 Codepen.com 上找到多种表单元素样式


旧答案(来自 2009 年 5 月 16 日):

是的,这很简单。

你可以使用niceforms,这是一个独立的脚本
来制作
表格好看,然后就可以修改
图形图像/
CSS如你所愿。

这个想法是,用相同的代码编写看起来相同的东西
功能但设计不同,那么
你需要“给它
life” 与一些 javascript 魔法:)

然后,你必须到处都有 ilsteners,
检查
用户点击的内容,而不是您需要反映的相同值
对于预隐藏的表单元素,
对应于“fake”
一。 意思是,操纵它。
然后当您发送表格时,
正确的值是通过 JS 放置的。

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:

Today you can find many kinds of form element styling on Codepen.com


Old answer (from May 16 '09):

yes, it is quite easy.

you can use niceforms, which is independet script
for making
nice looking forms, then you can modify
the graphics images /
CSS as your wish.

The idea is, coding something that looks the same
with same
funcionality but different design, then
you need to "give it
life" with some javascript magic :)

then, you have to have ilsteners all over the place, to
check
what the user clicked, than you need to reflect
that same value
to the pre-hidden form element the
corresponds to the "fake"
one. means, to manipulate it.
then when you send the form, the
right values are places via JS.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文