I want to create hidden checkbox fields and when user click on field it will be checked.
Here is my example..
<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 (Look on jsfiddel)
Now i want to put hidden checkbox in that color blocks.
I changed your markup, using a form. Javascript is not necessary (unless you need to support IE8 or older browser)
Example code : http://codepen.io/anon/pen/Ixira
Every checkbox covers its label and it's transparent: so when you click a colour you're actually clicking the checkbox. The different style for the selected colour is applied through the :checked
pseudoclass.
Markup
<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;
}
Note: You could also obtain the same behaviour if you display: none
your checkboxes and use a for
attribute on labels (in that case also use a cursor: pointer
on labels for better usability) — here an example of this approach: http://codepen.io/anon/pen/wGBvq
Just modified your code to:
<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>
There are just a few changes I did. To make it looking good you may need to invest some more time to it.
.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;
}
Your changed Demo: fiddle
这是http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/的示例,它是如何隐藏复选框并将其替换为图形的示例
If it's only one colour you want selecting you can use a radio button instead which would be a better idea than a checkbox.
Make sure you have a label doing most of the work.
input[type="radio"]:checked+label {
border: 3px solid blue;
}
input {
display: none;
}
Here's a fiddle that uses a label for selecting the boxes. You may have to display the radio buttons in IE as selecting with a label doesn't always work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.