CSS - Can't call element in css if element is used for event function
I have an input and a checkbox looking like this:
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>
I can style ::before of the label like this:
css:
.aweCheckbox-primary input[type="checkbox"]:checked + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
All works fine. But if I add an ('event') function to the element
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();
});
... and in console I'm seeing:
<div class="aweCheckbox aweCheckbox-primary">
<input id="showPasswordRegister" type="checkbox">
<label class="labelShowPasswordRegister input_title" for="showPasswordRegister"> [Event]
::before
Show password
::after
</label>
</div>
... the styling of the label doesn' work. What am I missing?
javascript html css
asked Nov 20 '18 at 17:21
Philipp MPhilipp M
830828
add a comment |
I have an input and a checkbox looking like this:
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>
I can style ::before of the label like this:
css:
.aweCheckbox-primary input[type="checkbox"]:checked + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
All works fine. But if I add an ('event') function to the element
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();
});
... and in console I'm seeing:
<div class="aweCheckbox aweCheckbox-primary">
<input id="showPasswordRegister" type="checkbox">
<label class="labelShowPasswordRegister input_title" for="showPasswordRegister"> [Event]
::before
Show password
::after
</label>
</div>
... the styling of the label doesn' work. What am I missing?
javascript html css
asked Nov 20 '18 at 17:21
Philipp MPhilipp M
830828
Usingevent.preventDefault()in the event handler means that clicking on the label won't check the box. So the:checkedmodifier doesn't match.
– Barmar
Nov 20 '18 at 17:27
@Barmar ... excelllent, that was it. Thanks!
– Philipp M
Nov 20 '18 at 17:29
add a comment |
I have an input and a checkbox looking like this:
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>
I can style ::before of the label like this:
css:
.aweCheckbox-primary input[type="checkbox"]:checked + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
All works fine. But if I add an ('event') function to the element
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();
});
... and in console I'm seeing:
<div class="aweCheckbox aweCheckbox-primary">
<input id="showPasswordRegister" type="checkbox">
<label class="labelShowPasswordRegister input_title" for="showPasswordRegister"> [Event]
::before
Show password
::after
</label>
</div>
... the styling of the label doesn' work. What am I missing?
javascript html css
asked Nov 20 '18 at 17:21
Philipp MPhilipp M
830828
I have an input and a checkbox looking like this:
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>
I can style ::before of the label like this:
css:
.aweCheckbox-primary input[type="checkbox"]:checked + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
All works fine. But if I add an ('event') function to the element
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();
});
... and in console I'm seeing:
<div class="aweCheckbox aweCheckbox-primary">
<input id="showPasswordRegister" type="checkbox">
<label class="labelShowPasswordRegister input_title" for="showPasswordRegister"> [Event]
::before
Show password
::after
</label>
</div>
... the styling of the label doesn' work. What am I missing?
javascript html css
javascript html css
asked Nov 20 '18 at 17:21
Philipp MPhilipp M
830828
asked Nov 20 '18 at 17:21
Philipp MPhilipp M
830828
edited Nov 20 '18 at 17:31
Philipp M
asked Nov 20 '18 at 17:21
Philipp MPhilipp M
830828
asked Nov 20 '18 at 17:21
Philipp MPhilipp M
830828
asked Nov 20 '18 at 17:21
Philipp MPhilipp M
830828
830828
Usingevent.preventDefault()in the event handler means that clicking on the label won't check the box. So the:checkedmodifier doesn't match.
– Barmar
Nov 20 '18 at 17:27
@Barmar ... excelllent, that was it. Thanks!
– Philipp M
Nov 20 '18 at 17:29
add a comment |
Usingevent.preventDefault()in the event handler means that clicking on the label won't check the box. So the:checkedmodifier doesn't match.
– Barmar
Nov 20 '18 at 17:27
@Barmar ... excelllent, that was it. Thanks!
– Philipp M
Nov 20 '18 at 17:29
Using
event.preventDefault() in the event handler means that clicking on the label won't check the box. So the :checked modifier doesn't match.– Barmar
Nov 20 '18 at 17:27
Using
event.preventDefault() in the event handler means that clicking on the label won't check the box. So the :checked modifier doesn't match.– Barmar
Nov 20 '18 at 17:27
@Barmar ... excelllent, that was it. Thanks!
– Philipp M
Nov 20 '18 at 17:29
@Barmar ... excelllent, that was it. Thanks!
– Philipp M
Nov 20 '18 at 17:29
add a comment |
1 Answer
1
active
oldest
votes
Don't use event.preventDefault() in the handler function. When you click on the label, this prevents the default action of triggering a click on the corresponding checkbox. The CSS matches the :checked pseudo-class, but you're not checking the box when you do this.
The CSS should still work if you click on the checkbox itself rather than the label.
answered Nov 20 '18 at 17:31
BarmarBarmar
428k36250352
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398285%2fcss-cant-call-element-in-css-if-element-is-used-for-event-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Don't use event.preventDefault() in the handler function. When you click on the label, this prevents the default action of triggering a click on the corresponding checkbox. The CSS matches the :checked pseudo-class, but you're not checking the box when you do this.
The CSS should still work if you click on the checkbox itself rather than the label.
answered Nov 20 '18 at 17:31
BarmarBarmar
428k36250352
add a comment |
Don't use event.preventDefault() in the handler function. When you click on the label, this prevents the default action of triggering a click on the corresponding checkbox. The CSS matches the :checked pseudo-class, but you're not checking the box when you do this.
The CSS should still work if you click on the checkbox itself rather than the label.
answered Nov 20 '18 at 17:31
BarmarBarmar
428k36250352
add a comment |
Don't use event.preventDefault() in the handler function. When you click on the label, this prevents the default action of triggering a click on the corresponding checkbox. The CSS matches the :checked pseudo-class, but you're not checking the box when you do this.
The CSS should still work if you click on the checkbox itself rather than the label.
answered Nov 20 '18 at 17:31
BarmarBarmar
428k36250352
Don't use event.preventDefault() in the handler function. When you click on the label, this prevents the default action of triggering a click on the corresponding checkbox. The CSS matches the :checked pseudo-class, but you're not checking the box when you do this.
The CSS should still work if you click on the checkbox itself rather than the label.
answered Nov 20 '18 at 17:31
BarmarBarmar
428k36250352
answered Nov 20 '18 at 17:31
BarmarBarmar
428k36250352
answered Nov 20 '18 at 17:31
BarmarBarmar
428k36250352
answered Nov 20 '18 at 17:31
BarmarBarmar
428k36250352
428k36250352
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398285%2fcss-cant-call-element-in-css-if-element-is-used-for-event-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Using
event.preventDefault()in the event handler means that clicking on the label won't check the box. So the:checkedmodifier doesn't match.– Barmar
Nov 20 '18 at 17:27
@Barmar ... excelllent, that was it. Thanks!
– Philipp M
Nov 20 '18 at 17:29