Mixing
Change Color of H1 when checkbox is checked in CSS
0
I am trying to create a gender toggle button. But when I try to color the gender icons when checked it is not changing the color. I am trying to do it in CSS. I know how to do it in Javascript, but I am failing to do in CSS.
Here is my Code.
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>When I click the checkbox the ➜ symbol should change to lightblue, and when I click the checkbox again + symbol should change to pink.
I tried using the following code, But it is not working.
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
Where am I doing wrong.
Any help would be appreciated.
Thank you.
html css css3
asked Jan 1 at 6:23
chintuyadavsarachintuyadavsara
1,1501416
add a comment |
0
I am trying to create a gender toggle button. But when I try to color the gender icons when checked it is not changing the color. I am trying to do it in CSS. I know how to do it in Javascript, but I am failing to do in CSS.
Here is my Code.
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>When I click the checkbox the ➜ symbol should change to lightblue, and when I click the checkbox again + symbol should change to pink.
I tried using the following code, But it is not working.
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
Where am I doing wrong.
Any help would be appreciated.
Thank you.
html css css3
asked Jan 1 at 6:23
chintuyadavsarachintuyadavsara
1,1501416
As I see the checkbox doesn't toggle checkbox on click(I mean notchecked)
– לבני מלכה
Jan 1 at 6:27
Can you please modify it @לבנימלכה. Thank you
– chintuyadavsara
Jan 1 at 6:29
do you use jquery or only js?
– לבני מלכה
Jan 1 at 6:30
@לבנימלכה I can do it in Javascript, What I want is pure CSS version
– chintuyadavsara
Jan 1 at 6:31
add a comment |
0
0
0
2
I am trying to create a gender toggle button. But when I try to color the gender icons when checked it is not changing the color. I am trying to do it in CSS. I know how to do it in Javascript, but I am failing to do in CSS.
Here is my Code.
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>When I click the checkbox the ➜ symbol should change to lightblue, and when I click the checkbox again + symbol should change to pink.
I tried using the following code, But it is not working.
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
Where am I doing wrong.
Any help would be appreciated.
Thank you.
html css css3
asked Jan 1 at 6:23
chintuyadavsarachintuyadavsara
1,1501416
I am trying to create a gender toggle button. But when I try to color the gender icons when checked it is not changing the color. I am trying to do it in CSS. I know how to do it in Javascript, but I am failing to do in CSS.
Here is my Code.
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>When I click the checkbox the ➜ symbol should change to lightblue, and when I click the checkbox again + symbol should change to pink.
I tried using the following code, But it is not working.
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
Where am I doing wrong.
Any help would be appreciated.
Thank you.
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>html css css3
html css css3
asked Jan 1 at 6:23
chintuyadavsarachintuyadavsara
1,1501416
asked Jan 1 at 6:23
chintuyadavsarachintuyadavsara
1,1501416
asked Jan 1 at 6:23
chintuyadavsarachintuyadavsara
1,1501416
asked Jan 1 at 6:23
chintuyadavsarachintuyadavsara
1,1501416
asked Jan 1 at 6:23
chintuyadavsarachintuyadavsara
1,1501416
1,1501416
As I see the checkbox doesn't toggle checkbox on click(I mean notchecked)
– לבני מלכה
Jan 1 at 6:27
Can you please modify it @לבנימלכה. Thank you
– chintuyadavsara
Jan 1 at 6:29
do you use jquery or only js?
– לבני מלכה
Jan 1 at 6:30
@לבנימלכה I can do it in Javascript, What I want is pure CSS version
– chintuyadavsara
Jan 1 at 6:31
add a comment |
As I see the checkbox doesn't toggle checkbox on click(I mean notchecked)
– לבני מלכה
Jan 1 at 6:27
Can you please modify it @לבנימלכה. Thank you
– chintuyadavsara
Jan 1 at 6:29
do you use jquery or only js?
– לבני מלכה
Jan 1 at 6:30
@לבנימלכה I can do it in Javascript, What I want is pure CSS version
– chintuyadavsara
Jan 1 at 6:31
As I see the checkbox doesn't toggle checkbox on click(I mean not
checked)– לבני מלכה
Jan 1 at 6:27
As I see the checkbox doesn't toggle checkbox on click(I mean not
checked)– לבני מלכה
Jan 1 at 6:27
Can you please modify it @לבנימלכה. Thank you
– chintuyadavsara
Jan 1 at 6:29
Can you please modify it @לבנימלכה. Thank you
– chintuyadavsara
Jan 1 at 6:29
do you use jquery or only js?
– לבני מלכה
Jan 1 at 6:30
do you use jquery or only js?
– לבני מלכה
Jan 1 at 6:30
@לבנימלכה I can do it in Javascript, What I want is pure CSS version
– chintuyadavsara
Jan 1 at 6:31
@לבנימלכה I can do it in Javascript, What I want is pure CSS version
– chintuyadavsara
Jan 1 at 6:31
add a comment |
1 Answer
1
active
oldest
votes
1
You need to use parent class switch also because it is siblings of input and using + you can only style to siblings and change color of h1 also when unchecked
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>answered Jan 1 at 6:34
Hiren VaghasiyaHiren Vaghasiya
3,4581520
It worked! But why to include the parentswitch?
– chintuyadavsara
Jan 1 at 6:37
using + you can only style to siblings so need to add as parent class
– Hiren Vaghasiya
Jan 1 at 6:39
then what about~?
– chintuyadavsara
Jan 1 at 6:41
1
~ it is for all siblings and + for nearby siblings
– Hiren Vaghasiya
Jan 1 at 6:41
@chintuyadavsara Welcome Mate
– Hiren Vaghasiya
Jan 1 at 6:45
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
});
}
});
draft saved
draft discarded
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%2f53993448%2fchange-color-of-h1-when-checkbox-is-checked-in-css%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
1
You need to use parent class switch also because it is siblings of input and using + you can only style to siblings and change color of h1 also when unchecked
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>answered Jan 1 at 6:34
Hiren VaghasiyaHiren Vaghasiya
3,4581520
It worked! But why to include the parentswitch?
– chintuyadavsara
Jan 1 at 6:37
using + you can only style to siblings so need to add as parent class
– Hiren Vaghasiya
Jan 1 at 6:39
then what about~?
– chintuyadavsara
Jan 1 at 6:41
1
~ it is for all siblings and + for nearby siblings
– Hiren Vaghasiya
Jan 1 at 6:41
@chintuyadavsara Welcome Mate
– Hiren Vaghasiya
Jan 1 at 6:45
add a comment |
1
You need to use parent class switch also because it is siblings of input and using + you can only style to siblings and change color of h1 also when unchecked
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>answered Jan 1 at 6:34
Hiren VaghasiyaHiren Vaghasiya
3,4581520
It worked! But why to include the parentswitch?
– chintuyadavsara
Jan 1 at 6:37
using + you can only style to siblings so need to add as parent class
– Hiren Vaghasiya
Jan 1 at 6:39
then what about~?
– chintuyadavsara
Jan 1 at 6:41
1
~ it is for all siblings and + for nearby siblings
– Hiren Vaghasiya
Jan 1 at 6:41
@chintuyadavsara Welcome Mate
– Hiren Vaghasiya
Jan 1 at 6:45
add a comment |
1
1
1
You need to use parent class switch also because it is siblings of input and using + you can only style to siblings and change color of h1 also when unchecked
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>answered Jan 1 at 6:34
Hiren VaghasiyaHiren Vaghasiya
3,4581520
You need to use parent class switch also because it is siblings of input and using + you can only style to siblings and change color of h1 also when unchecked
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>answered Jan 1 at 6:34
Hiren VaghasiyaHiren Vaghasiya
3,4581520
edited Jan 1 at 6:39
answered Jan 1 at 6:34
Hiren VaghasiyaHiren Vaghasiya
3,4581520
answered Jan 1 at 6:34
Hiren VaghasiyaHiren Vaghasiya
3,4581520
answered Jan 1 at 6:34
Hiren VaghasiyaHiren Vaghasiya
3,4581520
3,4581520
It worked! But why to include the parentswitch?
– chintuyadavsara
Jan 1 at 6:37
using + you can only style to siblings so need to add as parent class
– Hiren Vaghasiya
Jan 1 at 6:39
then what about~?
– chintuyadavsara
Jan 1 at 6:41
1
~ it is for all siblings and + for nearby siblings
– Hiren Vaghasiya
Jan 1 at 6:41
@chintuyadavsara Welcome Mate
– Hiren Vaghasiya
Jan 1 at 6:45
add a comment |
It worked! But why to include the parentswitch?
– chintuyadavsara
Jan 1 at 6:37
using + you can only style to siblings so need to add as parent class
– Hiren Vaghasiya
Jan 1 at 6:39
then what about~?
– chintuyadavsara
Jan 1 at 6:41
1
~ it is for all siblings and + for nearby siblings
– Hiren Vaghasiya
Jan 1 at 6:41
@chintuyadavsara Welcome Mate
– Hiren Vaghasiya
Jan 1 at 6:45
It worked! But why to include the parent
switch ?– chintuyadavsara
Jan 1 at 6:37
It worked! But why to include the parent
switch ?– chintuyadavsara
Jan 1 at 6:37
using + you can only style to siblings so need to add as parent class
– Hiren Vaghasiya
Jan 1 at 6:39
using + you can only style to siblings so need to add as parent class
– Hiren Vaghasiya
Jan 1 at 6:39
then what about
~?– chintuyadavsara
Jan 1 at 6:41
then what about
~?– chintuyadavsara
Jan 1 at 6:41
1
1
~ it is for all siblings and + for nearby siblings
– Hiren Vaghasiya
Jan 1 at 6:41
~ it is for all siblings and + for nearby siblings
– Hiren Vaghasiya
Jan 1 at 6:41
@chintuyadavsara Welcome Mate
– Hiren Vaghasiya
Jan 1 at 6:45
@chintuyadavsara Welcome Mate
– Hiren Vaghasiya
Jan 1 at 6:45
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53993448%2fchange-color-of-h1-when-checkbox-is-checked-in-css%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
As I see the checkbox doesn't toggle checkbox on click(I mean not
checked)– לבני מלכה
Jan 1 at 6:27
Can you please modify it @לבנימלכה. Thank you
– chintuyadavsara
Jan 1 at 6:29
do you use jquery or only js?
– לבני מלכה
Jan 1 at 6:30
@לבנימלכה I can do it in Javascript, What I want is pure CSS version
– chintuyadavsara
Jan 1 at 6:31