我想创建隐藏的复选框字段,当用户单击字段时,它将被选中。
这是我的例子..
http://jsfiddle.net/NnQvD/
<h3>Choose color</h3>
<ul class="color-picker list-inline">
<li class="active"><a class="active gray" href="#"></a>
</li>
<li><a class="yellow" href="#"></a>
</li>
<li><a class="red" href="#"></a>
</li>
<li><a class="green" href="#"></a>
</li>
</ul>
+CSS (在 jsfiddel 上看)
现在我想在该色块中放置隐藏的复选框。
我使用表单更改了您的标记。Javascript不是必需的(除非你需要支持IE8或更早的浏览器)
示例代码 : http://codepen.io/anon/pen/Ixira
每个复选框都覆盖其标签并且是透明的:因此,当您单击一种颜色时,您实际上是在单击该复选框。所选颜色的不同样式通过:checked
伪类应用。
标记
<form>
<fieldset>
<ul>
<li>
<input type="checkbox" name="y" />
<label>Gray</label>
</li>
<li>
<input type="checkbox" name="r" />
<label>Red</label>
</li>
<li>
<input type="checkbox" name="g" />
<label>Green</label>
</li>
<li>
<input type="checkbox" name="b" />
<label>Blue</label>
</li>
</ul>
</fieldset>
</form>
.CSS:
ul {
list-style: none;
}
li {
position: relative;
height: 40px;
width: 40px;
margin: 5px 0;
}
input {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: .01;
cursor: pointer;
}
label {
display: block;
width: 100%;
height: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-indent: 100%;
overflow: hidden;
}
[name="y"] + label { background: gray; }
[name="r"] + label { background: red; }
[name="g"] + label { background: green; }
[name="b"] + label { background: blue; }
input:checked + label {
border: 5px #fff double;
}
注意:如果您display: none
复选框并在标签上使用 for
属性(在这种情况下,还要在标签上使用 cursor: pointer
以获得更好的可用性),您也可以获得相同的行为 — 以下是此方法的示例:http://codepen.io/anon/pen/wGBvq
刚刚将您的代码修改为:
<ul class="color-picker list-inline">
<li>
<input type="checkbox" id="gray">
<label for="gray" class="gray"></label>
</li>
<li>
<input type="checkbox" id="yellow">
<label for="yellow" class="yellow"></label>
</li>
<li>
<input type="checkbox" id="red">
<label for="red" class="red"></label>
</li>
<li>
<input type="checkbox" id="green">
<label for="green" class="green"></label>
</li>
</ul>
我只做了一些更改。为了使它看起来不错,您可能需要投入更多时间。
.color-picker li {
padding: 10px;
margin: 10px;
border-radius: 4px;
width:40px;
height:50px;
}
.color-picker label {
display: block;
padding: 20px;
border-radius: 4px;
}
.color-picker .gray {
background-color: gray;
}
.color-picker .yellow {
background-color: yellow;
}
.color-picker .red {
background-color: red;
}
.color-picker .green {
background-color: green;
}
.color-picker input[type='checkbox'] {
visibility: hidden;
}
.color-picker label {
border: 1px solid transparent;
}
.color-picker input:checked + label {
border-color: black;
}
您更改的演示:小提琴
这里 http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/是一个示例,如何隐藏复选框并将其替换为图形
如果它只是您想要选择的一种颜色,您可以使用单选按钮代替,这将比复选框更好。
确保您有一个标签来完成大部分工作。
input[type="radio"]:checked+label {
border: 3px solid blue;
}
input {
display: none;
}
这是一个使用标签来选择框的小提琴。 您可能需要在IE中显示单选按钮,因为使用标签进行选择并不总是有效。
http://jsfiddle.net/Q5T4J/1/