html排期勾选样式,bootstrap修改勾选样式

小对勾需要引入awesome插件。

css部分：

.bella-checkbox{

position: relative;

}

/** 将初始的checkbox的样式改变 */

.bella-checkbox input[type="checkbox"] {

opacity: 0; /*将初始的checkbox隐藏起来*/

}

/** 设计新的checkbox，位置 */

.bella-checkbox label:before {

content: ‘‘;

width: 18px;

height: 18px;

display: inline-block;

border-radius: 2px;

border: 1px solid #bbb;

background: #fff;

}

/** 点击初始的checkbox，将新的checkbox关联起来 */

.bella-checkbox input[type="checkbox"]:checked + label:after {

display: inline-block;

font-family: ‘FontAwesome‘;

content: "\f00c";

top: 1px;

left: 0px;

position: absolute;

font-size: 10px;

line-height: 1.7;

width: 18px;

height: 18px;

color: #fff;

background: #2b94e5;

border-radius: 2px;

}

.bella-checkbox label {

cursor: pointer;

text-align: center;

position: absolute;

top: 4px;

left: 10px;

}

列表部分：

配置列表当中

onPostBody:function(){ //设置复选框的样式，参数id

onPostBody(‘apFnodeList‘);

},

js部分:

function onPostBody(eleId){

//改变复选框样式

$(‘#‘+eleId).find("input:checkbox").each(function (i) {

var $check = $(this);

if ($check.attr("id") && $check.next("label")) {

return;

}

var name = $(this).attr(‘id‘) + $check.attr("name");

var id = name + "-" + i;

var $label = $(‘‘);

$check.attr("id", id+eleId).parent().addClass("bella-checkbox").append($label);

});

}

样式如下图：

原文：https://www.cnblogs.com/benmumu/p/10756544.html