（兼容）checkbox 样式优化

html 

  if ($("#hidRela").val() == "1") {
        return '<input type="checkbox" class="divCheckbox"  value="' + cellValue + '"  onclick="RejectedClick(this)" id="' + row.Id + '"   name="rejected" ' + (cellValue == "1" ? 'checked="checked"' : '') + '/> <label  for="'+row.Id+'"></label >';                                       
     }
  else {
       return '<input type="checkbox" class="divCheckbox" id="' + row.Id + '"  value="' + cellValue + '"  onclick="return false;"    name="rejected" ' + (cellValue == "1" ? 'checked="checked"' : '') + '/><label  for="' + row.Id + '"></label >'; }   

css

   tr  input[type="checkbox"]{
            width:20px;
            height:20px;
            display: inline-block;
            text-align: center;
            vertical-align: middle; 
            line-height: 18px;
            position: relative;
  }
  tr  input[type="checkbox"]::before{
          content: "";
          position: absolute;
          top: 0;left: 0;
          background: #fff;
          width: 100%;height: 100%;
          border: 1px solid #d9d9d9
 }
  tr .divCheckbox:checked::before{
         content: "\2713";
         background-color:deepskyblue;
         position: absolute;top: 0;
         left: 0;width:100%;
         border: 1px solid deepskyblue;
         color:white;
         font-size: 20px;
         font-weight: bold;
 }  

 content: "\2713"; //“\2713”实体符号√

选中的颜色可以在input[type="checkbox"]:checked::before里修改border-color及background-color

效果：

 

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。