-
Jun 11th, 2015, 04:15 PM
#1
Width of Span Not Setting and Style Elements After Checkbox Checked
I have a two-for-one question and it relates to the same control I'm trying to build. I'm trying to make a toggle switch where if you click on the control it slides horizontally to signify a True or False value. Here is my code thus far:
HTML Code:
<label class="switchButton">
<span>Hello World!</span>
<input type="checkbox" checked />
<span class="slider"></span>
<span>Goodbye World!</span>
</label>
Code:
.switchButton {
border: 1px solid #ccc;
padding: 2px;
}
.switchButton input[type="checkbox"] {
display: none;
}
.switchButton input[type="checkbox"]:checked > span:first-of-type {
display: inline;
}
.switchButton input[type="checkbox"]:checked > span:last-of-type {
display: none;
}
.switchButton > span:first-of-type {
display: none;
}
.switchButton > span:last-of-type {
display: inline;
}
.slider {
border: 1px solid #ccc;
border-radius: 5px;
padding: 1px;
width: 50%;
}
My first issue is that my .slider <span> is not having it's width set at 50% even though I specifically tell it to. My second issue is that I want to show/hide the first and last <span> element dependent on the checked value of the checkbox by setting the display to either none or inline, but when I change the value, nothing is happening.
-
Jun 11th, 2015, 07:10 PM
#2
Fanatic Member
Re: Width of Span Not Setting and Style Elements After Checkbox Checked
You cannot set width of span because of its "display" setting... change the display of the span to inline-block, to change its width.
And for the second problem:
Maybe some of the answers here may be useful.
http://stackoverflow.com/questions/6...r-divs-styling
Specifically referring to the best rated response using the "~"-combinator
Code:
#a:checked ~ #b {
background: #ccc
}
Created a fiddle for you. https://jsfiddle.net/tbrL9fzr/3/
Last edited by Justa Lol; Jun 11th, 2015 at 07:58 PM.
-
Jun 11th, 2015, 07:20 PM
#3
Re: Width of Span Not Setting and Style Elements After Checkbox Checked
Hi there dday9,
here is how I would approach your little brain teaser...
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
body {
background-color:#f0f0f0;
font-family:arial,helvetica,sans-serif;
font-size:100%;
}
.switchButton {
position:relative;
display:block;
width:240px;
padding:2px;
margin:auto;
border:1px solid #999;
border-radius:10px;
background-color:#fff;
box-shadow:5px 5px 5px #999;
cursor:pointer;overflow:hidden;
}
.switchButton span {
float:left;
width:120px;
padding:10px 0;
font-size:80%;
color:#666;
text-align:center;
}
.switchButton input[type="checkbox"] {
display:none;
}
.switchButton input[type="checkbox"]:checked ~ span:first-of-type {
color:#666;
}
.switchButton input[type="checkbox"]:checked ~ span:last-of-type {
color:#fff;
}
.switchButton input[type="checkbox"]:checked ~ span:nth-child(3) {
top:2px;
margin-left:118px;
border-radius:0 8px 8px 0;
}
.switchButton span:first-of-type {
color:#fff;
-webkit-transition:all 1.5s ease;
transition:all 1.5s ease;
}
.switchButton span:last-of-type {
color:#666;
-webkit-transition:all 1.5s ease;
transition:all 1.5s ease;
}
.switchButton span:nth-child(3) {
position:absolute;
float:none;
display:block;
top:2px;
width:118px;
padding:9px 0;
margin-left:0;
z-index:2;
border:1px solid #999;
border-radius:8px 0 0 8px;
width:120px;
background-color:#ccc;
background-image:linear-gradient(to bottom,#eee,#aaa);
box-shadow:inset 0 0 10px #666;
-webkit-transition:all 1.5s ease;
transition:all 1.5s ease;
}
</style>
</head>
<body>
<label class="switchButton">
<input type="checkbox" checked>
<span>Hello World!</span>
<span> </span>
<span>Goodbye World!</span>
</label>
</body>
</html>
Last edited by coothead; Jun 11th, 2015 at 09:07 PM.
Reason: tpynig eorrr
~ the original bald headed old fart ~
-
Jun 11th, 2015, 07:22 PM
#4
Re: Width of Span Not Setting and Style Elements After Checkbox Checked
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|