使用很棒的字体和 css 的自定义复选框
Custom checkbox using font awesome and css
我正在制作一个字体很棒且 css 的自定义复选框。
在 click/when 复选框被选中时,我试图在黑色复选框周围创建一些填充(当 checked/clicked 时在白色框中有一个较小的黑框)
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*** basic styles ***/
/*** custom checkboxes ***/
input[type=checkbox] {
display: none;
}
/* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
}
input[type=checkbox] + label:before {
content: "\f096";
}
/* unchecked icon */
/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/
/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
content: "\f0c8";
}
/* checked icon */
input[type=checkbox]:checked + label:before {
letter-spacing: 5px;
}
/* allow space for check mark */
<div>
<input id="box1" type="checkbox" />
<label for="box1"></label>
<br>
<input id="box2" type="checkbox" />
<label for="box2"></label>
<br>
<input id="box3" type="checkbox" />
<label for="box3"></label>
</div>
像这样?
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*** basic styles ***/
/*** custom checkboxes ***/
input[type=checkbox] {
display: none;
}
/* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
}
input[type=checkbox] + label:before {
content: "\f096";
}
/* unchecked icon */
/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/
/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
content: "\f0c8";
font-size:12px;
margin-left:1px;
}
/* checked icon */
input[type=checkbox]:checked + label:before {
letter-spacing: 5px;
}
/* allow space for check mark */
<div>
<input id="box1" type="checkbox" />
<label for="box1"></label>
<br>
<input id="box2" type="checkbox" />
<label for="box2"></label>
<br>
<input id="box3" type="checkbox" />
<label for="box3"></label>
</div>
您使用的是单个字符,因此无法添加字母间距。
我建议这样。
减小替换的大小 icon/character,添加填充和边框。或者,搜索一个符合您要求的 icon/character 并使用它。
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*** basic styles ***/
/*** custom checkboxes ***/
input[type=checkbox] {
display: none;
}
/* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
}
input[type=checkbox] + label:before {
content: "\f096";
}
/* unchecked icon */
/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/
/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
content: "\f0c8";
display: inline-block;
}
/* checked icon */
input[type=checkbox]:checked + label:before {
font-size: 60%;
border: 1px solid black;
vertical-align: top;
padding: 2px;
border-radius: 2px;
}
/* allow space for check mark */
<div>
<input id="box1" type="checkbox" />
<label for="box1"></label>
<br>
<input id="box2" type="checkbox" />
<label for="box2"></label>
<br>
<input id="box3" type="checkbox" />
<label for="box3"></label>
</div>
我正在制作一个字体很棒且 css 的自定义复选框。
在 click/when 复选框被选中时,我试图在黑色复选框周围创建一些填充(当 checked/clicked 时在白色框中有一个较小的黑框)
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*** basic styles ***/
/*** custom checkboxes ***/
input[type=checkbox] {
display: none;
}
/* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
}
input[type=checkbox] + label:before {
content: "\f096";
}
/* unchecked icon */
/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/
/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
content: "\f0c8";
}
/* checked icon */
input[type=checkbox]:checked + label:before {
letter-spacing: 5px;
}
/* allow space for check mark */
<div>
<input id="box1" type="checkbox" />
<label for="box1"></label>
<br>
<input id="box2" type="checkbox" />
<label for="box2"></label>
<br>
<input id="box3" type="checkbox" />
<label for="box3"></label>
</div>
像这样?
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*** basic styles ***/
/*** custom checkboxes ***/
input[type=checkbox] {
display: none;
}
/* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
}
input[type=checkbox] + label:before {
content: "\f096";
}
/* unchecked icon */
/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/
/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
content: "\f0c8";
font-size:12px;
margin-left:1px;
}
/* checked icon */
input[type=checkbox]:checked + label:before {
letter-spacing: 5px;
}
/* allow space for check mark */
<div>
<input id="box1" type="checkbox" />
<label for="box1"></label>
<br>
<input id="box2" type="checkbox" />
<label for="box2"></label>
<br>
<input id="box3" type="checkbox" />
<label for="box3"></label>
</div>
您使用的是单个字符,因此无法添加字母间距。
我建议这样。
减小替换的大小 icon/character,添加填充和边框。或者,搜索一个符合您要求的 icon/character 并使用它。
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*** basic styles ***/
/*** custom checkboxes ***/
input[type=checkbox] {
display: none;
}
/* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
}
input[type=checkbox] + label:before {
content: "\f096";
}
/* unchecked icon */
/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/
/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
content: "\f0c8";
display: inline-block;
}
/* checked icon */
input[type=checkbox]:checked + label:before {
font-size: 60%;
border: 1px solid black;
vertical-align: top;
padding: 2px;
border-radius: 2px;
}
/* allow space for check mark */
<div>
<input id="box1" type="checkbox" />
<label for="box1"></label>
<br>
<input id="box2" type="checkbox" />
<label for="box2"></label>
<br>
<input id="box3" type="checkbox" />
<label for="box3"></label>
</div>