我有一个输入和一个复选框,如下所示:
html:
<input class="form-control input_box" id="passwordRegister" name="password" type="text">
<div class="aweCheckbox aweCheckbox-primary">
<input id="showPasswordRegister" type="checkbox">
<label class="labelShowPasswordRegister input_title" for="showPasswordRegister">
::before
Show password
::after
</label>
</div>
我可以这样设置标签的::before 样式:
CSS:
.aweCheckbox-primary input[type="checkbox"]:checked + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
一切正常。但是,如果我向元素添加一个 ('event') 函数
js:
function showPasswordRegister() {
var x = document.getElementById("passwordRegister");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
$(".labelShowPasswordRegister").on('click',function(event){
event.preventDefault();
event.stopPropagation();
showPasswordRegister();
});
...在控制台中我看到:
<div class="aweCheckbox aweCheckbox-primary">
<input id="showPasswordRegister" type="checkbox">
<label class="labelShowPasswordRegister input_title" for="showPasswordRegister"> [Event]
::before
Show password
::after
</label>
</div>
...标签的样式不起作用。我错过了什么?
最佳答案
不要在处理函数中使用 event.preventDefault()
。当您点击标签时,这会阻止触发点击相应复选框的默认操作。 CSS 与 :checked
伪类相匹配,但您执行此操作时并未选中该框。
如果您单击复选框本身而不是标签,CSS 应该仍然有效。
关于javascript - CSS - 如果元素用于事件函数,则无法在 css 中调用元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53398285/