使用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/