Question

我在网站上使用Font Awesome图标。我对HTML＆amp; CSS。我试图将它用于复选框，并且很难弄清楚如何使用它来启用/禁用复选框并显示approrpiate图标。

例如;我在复选框中使用以下标签：

<div style="font-size: 24px;">
<i id="prime" type="checkbox" class="icon-check-empty"></i>icon-check
</div>

当启用/禁用复选框时，我正在使用以下jQuery更改图标：

$(".icon-check-empty").click(function(){
    $('#prime').removeClass('icon-check-empty');
    $('#prime').addClass('icon-check');
});

我确信这不应该是应该如何使用的方式。你能否指导我应该如何使用它。

现在;我想使用复选框，我的目标是选中/取消选中复选框，并显示相应的图标。选中时：icon-check;未选中：icon-check-empty

请指导我!!

Answer 1

这是我的simple CSS-only method：

input[type="radio"],
input[type="checkbox"] {
  display:none;
}

input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
  font-family: 'FontAwesome';
  padding-right: 3px;
  font-size: 20px;
}

input[type="radio"] + span:before {
  content: "\f10c"; /* circle-blank */
}

input[type="radio"]:checked + span:before {
  content: "\f111"; /* circle */
}

input[type="checkbox"] + span:before {
  content: "\f096"; /* check-empty */
}

input[type="checkbox"]:checked + span:before {
  content: "\f046"; /* check */
}

基本思路是选择跨度：在此之前输入旁边你想要的。我举了一个复选框＆amp;收音机。如果你使用less / sass，你可以只包括.icon-glass：在声明之前，使它更容易维护＆amp;修改

作为旁注，您可以使用此方法设置您想要的样式，因此请更改颜色，背景，阴影颜色，图标等。

您可以使用FontAwesome source来添加要添加的角色。

selectivizr支持：之前＆amp; ：选中，所以如果您支持IE6-8，请使用它来支持IE6 +：

<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"</script>
<noscript><link rel="stylesheet" href="[fallback css that display:inline-block radios & checkboxes]" /></noscript>
<![endif]-->

Answer 2

许多花哨的复选框解决方案都存在以无法接收输入焦点的方式删除原始输入复选框的缺陷。
由于两个原因，这是不可接受的：

您无法使用键盘（Tab-key和spacebar）导航至复选框并更改其值。
您无法在复选框上应用悬停和重点样式。

@konsumer的上述解决方案很不错，但缺乏输入焦点能力。但是我遇到了 implementation 通过@geoffrey_crofte输入焦点的工作原理。然而，它可能不像@konsumers那样花哨

所以......我将这两个结合起来并推出plunker example。此解决方案的唯一缺点是您必须使用特定的html标记才能工作：

<input type="checkbox" class="fancy-check" id="myId"/>
<label for="myId" ><span>The label text</span></label>

复选框后面必须是标签标签。然后label标记可以包含span标记，其中包含标签文本。

我还要求使用类fancy-check来应用新样式。这是为了避免样式在label标记之后销毁页面中缺少必需的其他复选框。

该示例基于使用图标字体，在这种情况下，它需要FontAwesome library。

样式表在这里：

/*Move he original checkbox out of the way */
[type="checkbox"].fancy-check {
  position: absolute;
  left: -9999px;
}
/*Align the icon and the label text to same height using tabl-cell display*/
/*If you change the font-size of the text, you may also want to do som padding or alignhment changes here*/
.fancy-check ~ label >  span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 5px;
}
/*The label will contain the icon and the text, will grab the focus*/
[type="checkbox"].fancy-check + label {
  cursor: pointer;
  display: table;
}
/*The icon container, set it to fixed size and font size, the padding is to align the border*/
/*If you change the font-size of this icon, be sure to adjust the min-width as well*/
[type="checkbox"].fancy-check + label:before {
  font-family: 'FontAwesome';
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid transparent;
  font-size: 22px;
  min-width: 28px;
  padding: 2px 0 0 3px;
}
/* toggle font awsome icon*/
[type="checkbox"].fancy-check:checked + label:before {
  content: "\f046";
}
[type="checkbox"].fancy-check:not(:checked) + label:before {
  content: "\f096";    
}
/*Do something on focus, in this case show dashed border*/
[type="checkbox"].fancy-check:focus + label:before {
  border: 1px dashed #777;
}
/*Do something on hover, in this case change the image color*/
[type="checkbox"].fancy-check:hover + label:before {
   color: #67afe5;
}

Answer 3

$("yourselector").click(function(){
    if($(this).hasClass('icon-check')){
        $(this).removeClass('icon-check').addClass('icon-check-empty');}
    else {
        $(this).removeClass('icon-check-empty').addClass('icon-check');}
});

根据需要更改yourselector部分

Answer 4

如果你正在运行jQuery，你可以使用这样的东西..

扩展jQuery：

jQuery.fn.extend({
  shinyCheckbox:
    function() {
      var setIcon = function($el) {
        var checkbox = $el.find('input[type=checkbox]');
        var iclass = '';
        if (checkbox.is(':checked')) {
          var iclass = 'icon-check';
        } else {
          var iclass = 'icon-check-empty';
        }
        $el.find('i[class^=icon-]').removeClass('icon-check').removeClass('icon-check-empty').addClass(iclass);
      }
      this.find('input[type=checkbox]').change(function() {
        setIcon($(this).parents('label.checkbox'));
      });
      this.each(function(i, el) {
        setIcon($(el));
      });
    }  
});

$(document).ready(function() {
  $('label.checkbox').shinyCheckbox();
});

然后在你的html中使用它：

<label class="checkbox" for="mycheckbox">
  <i class="icon-check-empty"></i>
  <input type="hidden" name="mycheckbox" value="0" />
  <input id="mycheckbox" name="mycheckbox" type="checkbox" value="1" checked="checked" />
  Meine Checkbox hat einen sehr langen Text
</label>

还有一些基本的CSS，你有一个闪亮的复选框：

input[type="checkbox"] {
    display: none;
}
label.checkbox {
    cursor: pointer;
    display: inline-block;
    margin-left: 1px;
    padding-left: 15px; /* maybe this is not enough for your font size - remember: it's just an example and not best practice */
}
label.checkbox .icon-check:before, label.checkbox .icon-check-empty:before {
    margin-left: -15px;
    padding-right: 3px;
}

Answer 5

看看这个：http://codepen.io/jamesbarnett/pen/yILjk

这是从我上面的链接起作用的代码。

/*** custom checkboxes ***/

input[type=checkbox] { 
    display:none; 
} 

/* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

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: "\f046"; 
} 

/* checked icon */
input[type=checkbox]:checked + label:before { 
    letter-spacing: 5px; 
}

Answer 6

这是一个非常干净的CSS示例。

http://jsfiddle.net/8wLBJ/

.checkbox-container { width: 100%; height: 30px; padding: 0 0 0 10px; margin: 5px 0 0 0; border-radius: 3px; background-color: #e5e5e5; }
.checkbox-container label { float: left; padding: 0; margin-top: 7px; }
.checkbox-container label .checkBoxTitle {width: 200px; margin-top: -1px; font-size: 12px;}

.newCheck[type="checkbox"]:not(:checked), .newCheck[type="checkbox"]:checked { position: absolute; left: -9999px;}
.newCheck[type="checkbox"]:not(:checked) + label, .newCheck[type="checkbox"]:checked + label { width: 150px; position: absolute; cursor: pointer; }
.newCheck[type="checkbox"]:not(:checked) + label:before,   .newCheck[type="checkbox"]:checked + label:before { content: ''; position: absolute; left: 0; top: -1px; width: 17px; height: 17px; border: 1px solid #aaa; background: #f8f8f8; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1);}
.newCheck[type="checkbox"]:not(:checked) + label:after,    .newCheck[type="checkbox"]:checked + label:after { content: '\f00c'; font-family: FontAwesome; padding-right: 5px; position: absolute; top: -8px; left: 0;  font-size: 20px; color: #555;}
.newCheck[type="checkbox"]:not(:checked) + label:after { opacity: 0;}
.newCheck[type="checkbox"]:checked + label:after { opacity: 1;}
.newCheck[type="checkbox"]:checked + label span, .newCheck[type="checkbox"]:not(:checked) + label span { position:absolute; left:25px; }

如何使用Font Awesome复选框等

6 个答案: