0

有没有办法只使用 HTML 和 CSS3 而不使用图像来设置刻度线复选框的样式，就像在 Google 的登录页面中一样？

4

2 回答 2

1

您可以通过结合使用 HTML、CSS 和 jQuery 来完成此操作。请参阅我在此处编写的代码，以从<a>标签创建复选框并使用 CSS 设置样式。

我已经测试了这段代码，它在 Chrome、FF 和 IE 7-10 中运行良好。还没有测试过 Safari 或 Opera...

http://jsfiddle.net/wdews/reXL6/

只需确保将<a>复选框标签嵌套在<form>标签中，为其提供 ID、“复选框”类和主题标签 HREF。在本质上：

    <form action="#" method="get">

    <a class="checkbox" id="myCheckbox" href="#"></a>

    -or-

    <a class="checkbox checked" id="myCheckbox" href="#"></a>

    </form>

让我知道这对你有什么影响。

于 2013-07-12T00:08:43.633 回答
0

这篇文章很旧，但这是我的建议：

将标签与您的复选框相关联，如下所示：

<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>

通过 CSS 隐藏您的复选框：

.checkboxes input[type=checkbox]{
    display:none
}

根据需要设置标签样式。我创建了一个简单的 jsfiddle，它充分展示了如何使用个性化复选框。

这是jsfiddle

于 2013-09-24T20:35:18.297 回答