2

我正在尝试仅使用 CSS 创建一个自定义复选框，但运气不佳。我尝试了 2 种不同的技术：

  1. http://lea.verou.me/2011/05/rule-filtering-based-on-specific-selectors-support/
  2. 自定义图像作为单选按钮（derik 的建议）

第一个效果最好，并在 IE9、FF 和 Chrome 中正确显示。但是，chrome 中的功能似乎有点偏离。在 Chrome 上进行测试时，我无法单击图像来更改“已选中”，而是必须单击标签的文本。有没有人找到更好的，只有 CSS 的方式？有没有办法纠正 Chrome 中的行为？

4

3 回答 3

8

迈克对此的一个很好的解决方案不是设置复选框的样式，而是设置复选框的标签并隐藏复选框按钮。

label { display: block; background: green; padding:10px; }
input[type="checkbox"] { display: none; }

<div>
<label for="example">Style me</label><input type="checkbox" id="example" />
</div>

当您单击标签时，它将选中复选框，隐藏它并使用 css/javascript 对标签做任何您想做的事情。这比尝试设置复选框的样式更容易，因为所有浏览器都以不同的方式呈现输入。

于 2012-09-13T20:32:12.200 回答
3

您可以使用伪元素 :before。这样您仍然可以获得复选框的功能。在我的示例中，我只是更改了颜色，但您可以添加白色背景和您自己的带有背景的自定义图像：url(yourimage.png)。

在这里查看我的垃圾箱

http://jsbin.com/ABoW/1/edit

于 2013-08-28T19:07:29.807 回答
0

我推荐这个版本： http ://equaltozero.ro/jquery-custom-form-v2-custom-input-type-checkbox-radio-and-custom-select-plugin/ （这是我创建的一个小插件）

也许你会发现这对你有用。:-)

根据“@Lelio Faieta”的建议，我将写下有关该链接的更多详细信息。

好吧，这个插件（jQuery 小插件）允许您使用输入类型（复选框和单选）设计，禁用操作和自定义 SELECT。这是一个可以让您更好地使用复选框的版本。

于 2013-12-31T20:13:48.707 回答