自定義複選框在選中時會稍微移動

我修改了項目中的複選框，使其與設計的其餘部分看起來更加一致，但是我遇到了一個問題：每當選中該複選框的標籤時都會稍微移動。自定義複選框在選中時會稍微移動

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

 
input[type="checkbox"]+label:before { 
 
    position: relative; 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: 0 10px 0 0; 
 
} 
 

 
input[type="checkbox"]:checked+label:before { 
 
    position: relative; 
 
    content: "✔"; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: 0 10px 0 0; 
 
}

<input type="checkbox" /> 
 
<label>Click to accept</label>

這裏的結果：

下面是會發生什麼，如果我選擇它：

我在做什麼錯？

來源

2017-08-31 ste

要解決「移動」，你需要：

在label::before設置vertical-align: some value我有選擇bottom。

而且對準了「✔」（如果它不 - 片段是不是），您需要：

在:checked+label::before

text-align:center

line-height:22px

height

此外，我除去重複的特性，沒有必要

注意：你錯過了在的for屬性來匹配輸入id，否則你無法在僞checkbox點擊，只有在label

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

 
input[type="checkbox"]+label::before { 
 
    position: relative; 
 
    content: " "; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: 0 10px 0 0; 
 
} 
 

 
input[type="checkbox"]:checked+label::before { 
 
    content: "✔"; 
 
    text-align: center; 
 
    line-height: 22px; 
 
}

<input id="input" type="checkbox" /> 
 
<label for="input">Click to accept</label>

來源

2017-08-31 09:53:08 dippas

-3

你可以試試這個，這是工作

input[type="checkbox"] { 
 
     position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    } 
 

 
    input[type="checkbox"] + label:before { 
 
     position: relative; 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: -8px 10px 0 0; 
 
    vertical-align: middle; 
 
    } 
 

 
    input[type="checkbox"]:checked + label:before { 
 
    content: "✔"; 
 
    text-align: center; 
 
    line-height: 22px; 
 
    }

<input type="checkbox"/> 
 
<label>Click to accept</label>

來源

2017-08-31 09:57:06

我已經使用Flexbox作爲標籤來垂直對齊項目。當複選框被選中時，添加text-align:center確保標記水平居中。

label { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

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

 
input[type="checkbox"]+label:before { 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    margin-right: 0.5em; 
 
} 
 

 
input[type="checkbox"]:checked+label:before { 
 
    content: "✔"; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    margin-right: 0.5em; 
 
    text-align: center; 
 
}

<input type="checkbox" id="accept" /> 
 
<label for="accept">Click to accept</label>

來源

2017-08-31 10:04:00 Gerard

這裏你可以看到另一種方式。

參見工作實施例下面：

/*--CSS--*/ 
 
    
 

 
    
 

 
input[type="checkbox"] { 
 
    -webkit-appearance: none; 
 
    background-color: transparent; 
 
    -webkit-rtl-ordering: logical; 
 
    user-select: text; 
 
    cursor: pointer; 
 
    padding: 1px; 
 
    border-width: 0; 
 
    border-style: inset; 
 
    border-color: initial; 
 
    border-image: initial; 
 
    float: left; 
 
    margin: 0 25px 0 0; 
 
    position: relative; 
 
} 
 
input[type="checkbox"]:after { 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 16px; 
 
    height: 16px; 
 
    border: 1px solid #c0c0c0; 
 
    top:0; 
 
} 
 
\t input[type="checkbox"]:before { 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 16px; 
 
    height: 16px; 
 
    border: 1px solid #c0c0c0; 
 
    top:0; 
 
    opactity:0; 
 
} 
 
    input[type="checkbox"]:checked:before { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    height: 5px; 
 
    border-color: #009688; 
 
    border-top-style: none; 
 
    border-right-style: none; 
 
    outline: none; 
 
    opacity: 1; 
 
    width: 12px; 
 
    top: 3px; 
 
    left: 3px; 
 
} 
 
input[type="checkbox"]:focus{outline:0;}

<!--HTML--> 
 
\t <input type="checkbox" /> 
 
\t <label>Click to accept</label>

來源

2017-08-31 11:02:38 Sangrai

自定義複選框在選中時會稍微移動

回答

相關問題