使用字體真棒和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的自定義複選框

回答

相關問題