自定义复选框使用字体真棒和CSS [英] Custom checkbox using font awesome and css

问题描述

点击/当复选框被选中时，我试图在黑色复选框周围创建一些填充取而代之的是（在检查/点击时在白色方框中有一个较小的黑框）

false>

  @import url（// netdna.bootstrapcdn.com/font -awesome / 3.2.1 / css / font-awesome.css）; / ***基本风格*** // ***自定义复选框*** / input [type = checkbox] {display：none;} / *隐藏复选框本身* / 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; } * // *复选框和标签之间的空格* / input [type = checkbox]：checked + label：before {content：\f0c8;} / * checked icon * / input [type = checkbox]：checked + label ：之前{letter-spacing：5px;} / *允许复选标记空格* /  

 < DIV> < input id =box1type =checkbox/> < label for =box1>< / label> <峰; br> < input id =box2type =checkbox/> < label for =box2>< / label> <峰; br> < input id =box3type =checkbox/> < label for =box3>< / label>< / div>  

'd建议像这样。

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

@import url（// netdna。 bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);/***基本风格*** // ***自定义复选框*** / input [type = checkbox] {display： none;} / *隐藏复选框本身* / 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; } * // *复选框和标签之间的空格* / input [type = checkbox]：checked + label：before {content：\f0c8;显示：inline-block;} / *选中图标* / input [type = checkbox]：选中+标签：before {font-size：60％;边框：1px纯黑色; vertical-align：top; padding：2px; border-radius：2px;} / *允许复选标记空格* /

 < DIV> < input id =box1type =checkbox/> < label for =box1>< / label> <峰; br> < input id =box2type =checkbox/> < label for =box2>< / label> <峰; br> < input id =box3type =checkbox/> < label for =box3>< / label>< / div>  

I'm making a custom checkbox with font awesome and css.

On click/when checkbox is checked, I trying to create some padding around the black checked box instead(having a smaller black box in the white box 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>

解决方案

You're using a single character so you can't add letter-spacing.

I'd suggest something like this.

Reduce the size of the replacement icon/character, add padding and a border. Alternatively, search for a proper icon/character that appears how you want it to be and use that.

@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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！