自定義複選框正在更改大小

我正在創建一些自定義複選框。我躲在標準複選框並用以下替換它：自定義複選框正在更改大小

.newcheckbox:before { 
    content: ""; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    border-radius: 2px; 
    background-color: rgba(29, 190, 96, 0.1); 
    border: 1px solid #1DBE60; 
} 

input[type="checkbox"]:checked + .newcheckbox:before { 
    color: #FFF; 
    background-color: #1DBE60; 
    content: "\2022"; 
    font-size: 20px; 
    text-align: center; 
}

的問題是，當我添加「內容」，當複選框處於高度的變化和它下面的元素跳躍選中的狀態。我一直在想什麼導致這個問題。

這裏是一個展示普拉克問題：http://plnkr.co/edit/Kc7XmgR4Nogx0w6Pmx9y?p=preview

你可以看到，當你刪除「內容」，它不會跳來跳去。

來源

2016-01-21 developthewebz

添加overflow:hidden所有input[type="checkbox"]:checked

片段這裏

/* Styles go here */ 
 

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

 
.tech-green:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 2px; 
 
    background-color: rgba(29, 190, 96, 0.1); 
 
    border: 1px solid #1DBE60; 
 
    overflow:hidden; 
 
} 
 

 
input[type="checkbox"]:checked + .tech-green:before { 
 
    color: #FFF; 
 
    background-color: #1DBE60; 
 
    content: "\2022"; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    display:inline-block; 
 
    overflow:hidden; 
 
} 
 

 
.tech-warn:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 2px; 
 
    background-color: rgba(240, 147, 29, 0.1); 
 
    border: 1px solid #F0931D; 
 
} 
 

 
input[type="checkbox"]:checked + .tech-warn:before { 
 
    color: #FFF; 
 
    background-color: #F0931D; 
 
    content: "\2022"; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    display:inline-block; 
 
    overflow:hidden; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <input id="techgreen" type="checkbox" name="check"> 
 
    <label for="techgreen" class="tech-green"></label> 
 
    </div> 
 

 
    <div> 
 
    <input id="techwarn" type="checkbox" name="check"> 
 
    <label for="techwarn" class="tech-warn"></label> 
 
    </div> 
 

 
    <div> 
 
    <input id="techgreen2" type="checkbox" name="check"> 
 
    <label for="techgreen2" class="tech-green"></label> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-01-21 03:27:26 repzero

你是一個生命的救星。非常感謝。 :) – developthewebz

歡迎.......：D – repzero

自定義複選框正在更改大小

回答

相關問題