自定义复选框在选中时会稍微移动

我修改了项目中的复选框，使其与设计的其余部分看起来更加一致，但是我遇到了一个问题：每当选中该复选框的标签时都会稍微移动。自定义复选框在选中时会稍微移动

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

自定义复选框在选中时会稍微移动

回答

相关问题