【问题标题】:Option as HTMLElement作为 HTMLElement 的选项
【发布时间】:2012-11-09 20:49:57
【问题描述】:

我希望有一个单选按钮输入,但不是单纯的圆圈,我更喜欢另一个 html 元素(包括结构)来说明选择。我认为这可能适用于 appearance 样式,但它不起作用(可能是因为 input[radio] 可能不包含其他元素。

有没有什么方法可以设置输入 radio 的样式,让它显示另一个 HTMLElement 而不是它的圆圈?

【问题讨论】:

标签: html css


【解决方案1】:

为什么不只保留单选按钮,而是使用标签标签使整个图像可点击?

【讨论】:

  • 我要这样做。使用这个答案看起来已经很棒了:stackoverflow.com/questions/4388102/…。现在我只需要找到一种隐藏单选按钮的方法(这样键盘控制仍然存在,但丑陋的输入消失了)。
  • 我仍然认为 2012 年的 html 开发变得如此骇人听闻。真可惜。
  • 最后,您可以通过添加 css input[type='radio'] { opacity: 0.01; } 隐藏该选项
【解决方案2】:

您可能想查看Uniform。它是一种对表单元素进行完全设计控制的好方法。事实上,它确实需要 JavaScript,但如果默认情况下未启用它,Uniform 会优雅地降级,提供标准表单功能。

【讨论】:

    【解决方案3】:

    有些浏览器允许您覆盖这些设置,但您必须使用一些超级 CSS 技巧才能使其正常工作。

    http://acidmartin.wordpress.com/2009/07/17/using-css-to-style-radiobuttons-and-checkboxes-for-safari-and-chrome/

    是一个很好的网站,它描述了如何做你正在谈论的事情。他们使用精灵表和特定于浏览器的外观样式来根据状态更改框的外观。

    【讨论】:

    • 我想保持简单,并且半途而废。所以我不想添加太多超级 hacky CSS。
    • 很公平。不过,其他选项仍然是“hacky”css。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-04
    相关资源
    最近更新 更多