使用HTML和CSS的样式复选框

Question

我不太喜欢Chromes复选框的样子，所以我尝试使用CSS对其进行样式设置，但我猜测它不起作用。

input[type="checkbox"] 
    { 
    border: 2px solid black; 
    outline: 0; 
    background: transparent; 

} 

Answer 1

HTML

<input type="checkbox" class="customCheckBox large" /> 

CSS

.customCheckBox[type="checkbox"]:after{ 
     position: relative; 
     display: block; 
     left: 2px; 
     top: -11px; 
     width: 7px; 
     height: 7px; 
     border-width: 1px; 
     border-style: solid; 
     border-color: #B3B3B3 #dcddde #dcddde #B3B3B3; 
     content: ""; 
     background-repeat: no-repeat; 
     background-position:center; 
    } 

    .customCheckBox[type="checkbox"]:before{ 
     border: 1px solid #808080; 
     content: ""; 
     background: #FFF; 
     position: relative; 
     display: block; 
     width: 11px; 
     height: 11px; 

    } 
    .customCheckBox[type="checkbox"]:checked:after{ 
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'); 
    } 
    /* Large checkboxes */ 
    .customCheckBox.large{ 
     height:22px; 
     width: 22px; 
    } 

    .customCheckBox.large[type="checkbox"]:before{ 
     width: 20px; 
     height: 20px; 
    } 
    .customCheckBox.large[type="checkbox"]:after{ 
     top: -20px; 
     width: 16px; 
     height: 16px; 
    } 

给予大量的类，因为你可能想增加一个类型的风格在你的CSS或复选框的大小这里:-)

Answer 2

＃1：How to style checkbox using CSS?

Hongkiat：Customize Checkboxes And Radio Buttons

CSScheckbox：http://www.csscheckbox.com/