【问题标题】:How to flatten checkbox using CSS? [duplicate]如何使用 CSS 展平复选框? [复制]
【发布时间】:2013-03-08 07:32:13
【问题描述】:

我正在使用以下 CSS 将表单上的文本框和文本区域展平:

textarea, input[type=text], select {
    border: 1px solid #B5B8C8;
}

我现在想包含复选框 .. 我认为这可以解决问题

textarea, input, select {
    border: 1px solid #B5B8C8;
}

在 Firefox 中似乎没有任何区别。在 IE 9/10 中,我在复选框周围出现了一个奇怪的边框(而不是更改复选框本身。

关于如何使复选框模仿文本框和文本区域以摆脱 3d 影响的任何建议。

【问题讨论】:

  • 我发现设置复选框和单选按钮样式的唯一方法是使用 jquery、精灵和标签
  • 长期以来一直是许多浏览器的痛点。您基本上需要以另一种方式破解。一种常见的技术是隐藏复选框,并在操作它的 GUI 中实现您自己的可视化替代方案。

标签: html css checkbox


【解决方案1】:

没有跨浏览器唯一的 CSS 解决方案来规范化表单元素。对于适用于现代浏览器的非 JS 解决方案,请查看 this CSS ninja article。否则,您最好的选择是 Uniform 之类的东西,它会为您完成繁重的工作,并且会退回到禁用 JavaScript 的常规表单元素。

使用原生表单元素及其样式(尤其是在移动设备上)的好处是巨大的。也就是说,复选框和单选按钮的自定义样式(相对于选择框/日期选择器等)在我的测试中似乎工作得很好。

【讨论】:

    猜你喜欢
    • 2023-03-03
    • 1970-01-01
    • 2023-03-27
    • 2016-10-16
    • 2021-11-23
    • 1970-01-01
    • 2011-10-14
    • 2021-02-11
    相关资源
    最近更新 更多