使用字体真棒和CSS的自定义复选框

在点击/时复选框被选中，我试图创造一些填充周围的黑色选中复选框，而不是（选中当具有白色框中较小的黑盒/点击）

@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>

来源

2015-10-07 Papa Tee

您使用单个字符，所以你可以不加字母间距。

我会建议这样的事情。

减小替换图标/字符的大小，添加填充和边框。或者，搜索一个合适的图标/字符，显示您希望如何使用它。

@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>

来源

2015-10-07 14:40:10

是否这样？

@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>

来源

2015-10-07 14:22:37

使用字体真棒和CSS的自定义复选框

回答

相关问题