I have 3 input box and I want to give padding between them.
I can't understand where to put padding.
Link to codepen
I have 3 Input boxes.
#import url(https://fonts.googleapis.com/css?family=Montserrat);
body {
display: inline-block;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Montserrat;
background: #313E50;
}
.text-input {
position: relative;
margin-top: 50px;
display: inline-block;
}
.text-input input[type="text"] {
display: inline-block;
width: 300px;
height: 40px;
box-sizing: border-box;
outline: none;
border: 1px solid lightgray;
border-radius: 3px;
padding: 10px 10px 10px 100px;
transition: all 0.1s ease-out;
}
.text-input input[type="text"]+label {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 40px;
line-height: 40px;
color: white;
border-radius: 3px 0 0 3px;
padding: 0 20px;
background: #E03616;
-webkit-transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
transition: all 0.3s ease-in;
transition-delay: 0.2s;
}
.text-input input[type="text"]:focus+label {
-webkit-transform: translateY(-120%) translateX(0%);
transform: translateY(-120%) translateX(0%);
border-radius: 3px;
transition: all 0.1s ease-out;
}
.text-input input[type="text"]:focus {
padding: 10px;
transition: all 0.3s ease-out;
transition-delay: 0.2s;
}
<div class="text-input">
<input type="text" id="input1" placeholder="Try typing something in here!">
<label for="input1">Name</label>
</div>
<div class="text-input">
<input type="text" id="input1" placeholder="Try typing something in here!">
<label for="input1">Name</label>
</div>
<div class="text-input">
<input type="text" id="input1" placeholder="Try typing something in here!">
<label for="input1">Name</label>
</div>
Add margin-right on .text-input
.text-input{
position: relative;
margin-top: 50px;
display: inline-block;
margin-right: 50px;/*Add This*/
https://codepen.io/anon/pen/GLzJvM
please try this css :
.text-input {
margin-left: 10px;
margin-right: 10px;
}
Related
I made a subscribe button for a mailing list and it works on PC/desktop view, but not on mobile devices (touchscreens).
You can click it and it works on desktop, but it doesn't do anything when you touch it on a mobile device.
It's just plain html and CSS. The code is below along with the media only properties.
Thanks in advance!
HTML
<div class="main">
<form
action="mailto:info#feudalerockband.com?subject=Mailing List"
method="POST"
enctype="text/plain"
name="EmailForm"
id="singular-form">
<button class="shown" type="button" id="subs">Subscribe to our mailing list!</button>
<div id="email-input">
<input type="text" placeholder="Email" id="email" name="Email Address">
<button type="button" class="addbut1">Subscribe</button>
</div>
<div id="success">Successfully subscribed to mailing list!</div>
</form>
</div>
CSS
.main {
align-items: center;
margin: auto;
width: 25rem;
height: 5rem;
padding: 12px;
background-color: rgb(41,47,51);
text-align: center;
border-radius: 1rem;
overflow: hidden;
transition: width .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.main>#singular-form {
position: relative;
width: 100%;
height: 100%;
background-color: rgb(41,47,51);
}
.main>#singular-form button {
width: 9rem;
padding: 0;
border: none;
outline: none;
border-radius: 3rem;
cursor: pointer;
}
.main>#singular-form>#subs {
padding: 0;
width: 100%;
color: white;
font-weight: bold;
background-color: transparent;
z-index: 3;
}
.main>#singular-form>#email-input {
z-index: 2;
}
.main>#singular-form>#email-input>input {
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10px;
background-color: white;
box-sizing: border-box;
border: none;
outline: none;
padding: 0 26% 0 3%;
opacity: 0;
transform: scale(0);
transition: all .6s ease .4s;
}
.main>#singular-form>#email-input>button {
position: absolute;
top: 0;
right: 0;
height: 100%;
border-radius: 5px;
background-color: rgb(13, 110, 253);
color: white;
opacity: 0;
transform: scale(0);
transition: all .6s ease .4s;
}
.main>#singular-form>#success {
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
z-index: 1;
}
.main>#singular-form>#subs,
.main>#singular-form>#email-input,
.main>#singular-form>#success {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale(0);
opacity: 0;
}
.main>#singular-form>#subs {
transition: all .6s ease;
}
.main>#singular-form>#email-input {
transform: scale(1);
opacity: 1;
transition: all .6s ease .4s;
}
.main>#singular-form>#success {
transition: all .2s ease .6s;
}
.main>#singular-form>#subs.shown,
.main>#singular-form>#email-input.shown,
.main>#singular-form>#success.shown,
.main>#singular-form>#email-input>button.shown,
.main>#singular-form>#email-input>input.shown {
transform: scale(1);
opacity: 1;
}
MEDIA ONLY VIEW
.main {
max-width: 350px;
margin: auto;
}
you must change the type of button to submit or leave it with out type
just like this
<button type="submit" class="addbut1">Subscribe</button>
or
<button class="addbut1">Subscribe</button>
so the code will be like this
<div class="main">
<form
action="mailto:info#feudalerockband.com?subject=Mailing List"
method="POST"
enctype="text/plain"
name="EmailForm"
id="singular-form">
<button class="shown" type="button" id="subs">Subscribe to our mailing list!</button>
<div id="email-input">
<input type="text" placeholder="Email" id="email" name="Email Address">
<button class="addbut1">Subscribe</button>
</div>
<div id="success">Successfully subscribed to mailing list!</div>
</form>
</div>
I got a tri-state toggle in my html/css and I want to change the font Color of "SCORE CLOCK CONFIG" to white when the toggle is switched to the specific value (Only changing the color of the selected state). What do I have to do for that? Thanks for any help!
<div class="toggle_radio">
<input type="radio" class="toggle_option" id="first_toggle" name="toggle_option">
<input type="radio" checked class="toggle_option" id="second_toggle" name="toggle_option">
<input type="radio" class="toggle_option" id="third_toggle" name="toggle_option">
<label for="first_toggle"><p>SCORE</p></label>
<label for="second_toggle"><p>CLOCK</p></label>
<label for="third_toggle"><p>CONFIG</p></label>
<div class="toggle_option_slider">
</div>
</div>
.toggle_radio{
position: relative;
border:1.5px solid #58B947;
margin: 15px auto;
overflow: hidden;
padding: 0 !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
height: 28px;
}
.toggle_radio > * {
float: left;
}
.toggle_radio input[type=radio]{
display: none;
}
.toggle_radio label{
font:"Lato Light";
color: black;
display: block;
width: 100px;
height: 20px;
margin: 3px 3px;
cursor: pointer;
text-align: center;
}
.toggle_option_slider{
z-index: -1;
width: 33%;
height: 100%;
position: absolute;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
}
#first_toggle:checked ~ .toggle_option_slider{
background: #58B947;
left: 0px;
}
#second_toggle:checked ~ .toggle_option_slider{
background: #58B947;
left: 108.5px;
}
#third_toggle:checked ~ .toggle_option_slider{
background: #58B947;
left: 218px;
}
Try using .on() and .css() after adding IDs or classes.
$('#first_toggle').on("click", function() {
$("#1").css("color", "white");
});
.toggle_radio {
position: relative;
border: 1.5px solid #58B947;
margin: 15px auto;
overflow: hidden;
padding: 0 !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
height: 28px;
}
.toggle_radio>* {
float: left;
}
.toggle_radio input[type=radio] {
display: none;
}
.toggle_radio label {
font: "Lato Light";
color: black;
display: block;
width: 100px;
height: 20px;
margin: 3px 3px;
cursor: pointer;
text-align: center;
}
.toggle_option_slider {
z-index: -1;
width: 33%;
height: 100%;
position: absolute;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
}
#first_toggle:checked~.toggle_option_slider {
background: #58B947;
left: 0px;
}
#second_toggle:checked~.toggle_option_slider {
background: #58B947;
left: 108.5px;
}
#third_toggle:checked~.toggle_option_slider {
background: #58B947;
left: 218px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle_radio">
<input type="radio" class="toggle_option" id="first_toggle" name="toggle_option">
<input type="radio" checked class="toggle_option" id="second_toggle" name="toggle_option">
<input type="radio" class="toggle_option" id="third_toggle" name="toggle_option">
<label for="first_toggle"><p id="1">SCORE</p></label>
<label for="second_toggle"><p>CLOCK</p></label>
<label for="third_toggle"><p>CONFIG</p></label>
<div class="toggle_option_slider">
</div>
</div>
Ok, having some weird CSS problems here trying to achieve this, having a warning thing to the right of each horizontally CENTERED input field:
Right now I have the centered inputs, but no matter what I do with float or even transform or translate on the .warning div, I can't achieve this.
.warning {
display: none;
margin-top: 10px;
}
.warning p {
color: #e85748;
display: none;
transform: translateX(105%) translateY(232%);
}
.ico-circle {
width: 40px;
position: absolute;
height: 40px;
border-radius: 50%;
transform: translateX(720%) translateY(22%);
background: #e85748;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
width: 50%;
float: center;
margin: auto;
margin-bottom: 9px;
}
input,
textarea {
padding: 15px 15px;
display: block;
margin: auto;
width: 200px;
/* height: 100%; */
color: #333333;
border-color: #333333;
border-radius: 15px;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
border: 4px solid #333333;
line-height: 1.3;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 13px;
flex: 0 0 160px;
width: 200px;
background-color: transparent;
}
input:focus {
outline: none !important;
border: 4px solid #e85748;
width: 250px;
-webkit-transition: width .25s ease;
transition: width .25s ease;
}
<div class="field-wrap">
<input id="username" type="text" placeholder="Username" required autocomplete="off">
<div class="warning" />
<p>Hello world</p>
<div class="ico-circle">
</div>
</div>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off">
<div class="warning">
<p>Hello world</p>
<div class="ico-circle">
</div>
</input>
</div>
Register
</i>Wait, take me back
What am I doing wrong here?
You can do it with flexbox but i'm not sure how you want it to present when the inputs are wider and/or have the warning beside it. Perhaps this will be sufficient to point you in the right direction:
.warning {
display: none;
}
.warning p {
color: #e85748;
}
.ico-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e85748;
order: -1;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
display: flex;
position: relative;
margin-bottom: 9px;
}
input,
textarea {
padding: 15px 15px;
margin: auto;
width: 200px;
/* height: 100%; */
color: #333333;
border-color: #333333;
border-radius: 15px;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
border: 4px solid #333333;
line-height: 1.3;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 13px;
width: 200px;
background-color: transparent;
}
input:focus {
outline: none !important;
border: 4px solid #e85748;
width: 250px;
-webkit-transition: width .25s ease;
transition: width .25s ease;
}
input:focus:invalid+.warning {
display: flex;
}
<div class="field-wrap">
<input id="username" type="text" placeholder="Username" required autocomplete="off" />
<div class="warning">
<p>Hello world</p>
<div class="ico-circle">
</div>
</div>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off" />
<div class="warning">
<p>Hello world</p>
<div class="ico-circle">
</div>
</div>
</div>
Register
</i>Wait, take me back
I want the placeholder to move to the top when the textbox is on focus and also while the user is typing.
I'm not sure if this is just html/css or any javascript too.
My current css looks like this, and I have no js code yet:
input:focus::-webkit-input-placeholder {
font-size: .75em;
position: relative;
top: -15px;
transition: 0.2s ease-out;
}
input::-webkit-input-placeholder {
transition: 0.2s ease-in;
}
input[type="text"]:focus, input[type="password"]:focus {
height: 50px;
padding-bottom: 0px;
transition: 0.2s ease-in;
}
input[type="text"], input[type="password"] {
height: 50px;
transition: 0.2s ease-in;
}
It almost does the work but the placeholder disappears when I start typing. I'm using twitter-bootstrap, if that makes anything easier!
Thanks.
You could do it like this
HTML:
<div>
<input type="text" class="inputText" />
<span class="floating-label">Your email address</span>
</div>
CSS:
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
top: 8px;
bottom: 10px;
left: 20px;
font-size: 11px;
opacity: 1;
}
.inputText {
font-size: 14px;
width: 200px;
height: 35px;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 18px;
transition: 0.2s ease all;
}
Working JSFiddle here https://jsfiddle.net/273ntk5s/2/
.user-input-wrp {
position: relative;
width: 50%;
}
.user-input-wrp .inputText{
width: 100%;
outline: none;
border:none;
border-bottom: 1px solid #777;
box-shadow: none !important;
}
.user-input-wrp .inputText:focus{
border-color: blue;
border-width: medium medium 2px;
}
.user-input-wrp .floating-label {
position: absolute;
pointer-events: none;
top: 18px;
left: 10px;
transition: 0.2s ease all;
}
.user-input-wrp input:focus ~ .floating-label,
.user-input-wrp input:not(:focus):valid ~ .floating-label{
top: 0px;
left: 10px;
font-size: 13px;
opacity: 1;
}
<h1>The floating label</h1>
<div class="user-input-wrp">
<br/>
<input type="text" class="inputText" required/>
<span class="floating-label">Your email address</span>
</div>
Modified the code from #user1846747 a little.
Only using HTML and css
.searchformfld{
position: relative;
margin: 5px 0px;
}
.searchformfld label{
position: absolute;
padding-left: 10px;
top:15px;
cursor: text;
}
.searchformfld input:focus + label,.searchformfld input:not(:placeholder-shown) + label{
opacity:1;
transform: scale(.9) translateY(-100%) translateX(-10px);
color:#000;
}
.searchformfld input:focus{
border:1px solid #000;
outline-color: #000;
}
.searchformfld{
padding: 15px;
margin:15px 0px;
}
.searchformfld input{
width:100%;
padding-left: 10px;
}
.searchformfld label,.searchformfld input{
transition: all 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
<div class="searchformfld">
<input type="text" class="candidateName" id="candidateName" name="candidateName" placeholder=" "/>
<label for="candidateName">Candidate name</label>
</div>
You can try the below code. It only uses HTML and CSS and does not reply on Javascript or component libraries:
.text-field {
position: relative;
margin: 10px 2.5px 20px 2.5px;
}
input {
display: inline-block;
border: thin solid #fafafa;
border-bottom: solid medium #999;
color: #444;
background-color: #fafafa;
padding: 10px 10px 10px 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
input:focus {
border: thin solid #32cd32;
border-bottom: solid medium #32cd32;
background-color:#fff;
}
label {
color: #999;
position: absolute;
pointer-events: none;
left: 10px;
top: 10px;
transition: 0.2s;
}
input:focus ~ label, input:valid ~ label {
top: -10px;
left: 15px;
font-size: small;
color: #32cd32;
background-color:#fff;
padding:0 5px 0 5px;
}
<div class="text-field">
<input type="text" required>
<label>Input field 1</label>
</div>
<div class="text-field">
<input type="text" required>
<label>Input field 2</label>
</div>
span{
display:block;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() {
$('input').focus(function(){
placeholder = $(this).attr('placeholder');
if(placeholder != undefined){
$(this).parent().prepend('<span class="input-placeholder">'+placeholder+'</span>');
}
});
$('input').blur(function(){
$(this).parent().find('.input-placeholder').remove();
});
});
</script>
<div>
<input type="text" class="inputText" placeholder="Email adress" required/>
</div>
The solution I want to propose deals with an input with the movement of the placeholder without the need for the required attribute
.inputField {
position: relative;
}
.inputField input {
padding: 8px 20px;
padding-top: 18px;
border: 1.8px solid rgba(107, 107, 107, 0.4);
border-radius: 3px;
width: 50%;
color: black;
}
.inputField input:focus {
border: 1.8px solid #6b6b6b;
outline: none;
}
.inputField span {
pointer-events: none;
opacity: 0.5;
position: absolute;
padding-left: 20px;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: text;
}
.inputField input:focus+span,
.inputField input:not(:placeholder-shown)+span {
top: 7px;
-webkit-transform: scale(0.7) translateY(-10%) translateX(-8.5px);
transform: scale(0.7) translateY(-10%) translateX(-8.5px);
}
.inputField input,
.inputField span {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
<div class="inputField">
<input type="text" placeholder=" " />
<span>Placeholder</span>
</div>
That site isn't moving the placeholder, but placing a div (.floating-label) over the input, so when the input is focused the div just animates to be over the input. The key part here is using pointer-events: none; in the floating div, so when you click it the event goes through it to the input box behind it.
if your Floating label is not working when required attribute is removed, try this: using input:not(:placeholder-shown)
input:focus ~ .floating-label,
input:not(:placeholder-shown) ~ .floating-label{
top: 8px;
bottom: 10px;
left: 20px;
font-size: 11px;
opacity: 1;
}
.inputText {
font-size: 14px;
width: 200px;
height: 35px;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 18px;
transition: 0.2s ease all;
}
<div>
<input placeholder="" type="text" class="inputText" />
<span class="floating-label">Your email address</span>
</div>
I have a switch button. But it doesn't work with the input type radio. If I try with checkbox button it works. Why? How can I solve, maintaining the radio input?
#charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
body {
background: #4a4a4a;
color: #151515;
font: 100%/1.5em "Lato", sans-serif;
margin: 0;
}
input {
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
/* ---------- SWITCH ---------- */
.container {
height: 64px;
left: 50%;
margin: -32px 0 0 -80px;
position: absolute;
top: 50%;
width: 160px;
}
.switch {
background: #fff;
border-radius: 32px;
display: block;
height: 64px;
position: relative;
width: 160px;
}
.switch label {
color: #fff;
font-size: 48px;
font-weight: 300;
line-height: 64px;
text-transform: uppercase;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
width: 100px;
}
.switch label:nth-of-type(1) {
left: -75%;
position: absolute;
text-align: right;
}
.switch label:nth-of-type(2) {
position: absolute;
right: -75%;
text-align: left;
}
.switch input {
height: 64px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 160px;
z-index: 2;
}
.switch input:checked~label:nth-of-type(1) { color: #fff; }
.switch input:checked~label:nth-of-type(2) { color: #808080; }
.switch input~:checked~label:nth-of-type(1) { color: #808080; }
.switch input~:checked~label:nth-of-type(2) { color: #fff; }
.switch input:checked~.toggle {
left: 4px;
}
.switch input~:checked~.toggle {
left: 100px;
}
.switch input:checked {
z-index: 0;
}
.toggle {
background: #4a4a4a;
border-radius: 50%;
height: 56px;
left: 0;
position: absolute;
top: 4px;
-webkit-transition: left .2s ease;
-moz-transition: left .2s ease;
-ms-transition: left .2s ease;
-o-transition: left .2s ease;
transition: left .2s ease;
width: 56px;
z-index: 1;
}
.c-window{
display: block;
position: absolute;
width: 235px;
height: 235px;
margin: 0 auto;
border-radius: 100%;
border: 8px solid #FFB399;
background: #5ddfe8;
box-shadow: 0px 0px 5px rgba(0,0,0,0.25) inset;
overflow: hidden;
transition: background 1s ease-in-out;
}
input[type="radio"]:checked ~ .c-window {
background: #111;
}
<div class="container">
<div class="c-window"></div>
<div class="switch white">
<input type="radio" name="switch" id="switch-off">
<input type="radio" name="switch" id="switch-on" checked>
<label for="switch-off">On</label>
<label for="switch-on">Off</label>
<span class="toggle"></span>
</div> <!-- end switch -->
</div> <!-- end container -->
I'd like that the .c-window changes the background colour when it switch
you had a few typos, as mentioned by #fcalderan in comments.
you need to have .c-window as sibling, change the HTML markup and add z-index:-1 to it.
and you need to specify which input is going to change the background color.
/* CSS Document */
/* ---------- GENERAL ---------- */
body {
background: #4a4a4a;
color: #151515;
font: 100%/1.5em"Lato", sans-serif;
margin: 0;
}
input {
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
/* ---------- SWITCH ---------- */
.container {
height: 64px;
left: 50%;
margin: -32px 0 0 -80px;
position: absolute;
top: 50%;
width: 160px;
}
.switch {
background: #fff;
border-radius: 32px;
display: block;
height: 64px;
position: relative;
width: 160px;
}
.switch label {
color: #fff;
font-size: 48px;
font-weight: 300;
line-height: 64px;
text-transform: uppercase;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
width: 100px;
}
.switch label:first-of-type {
left: -75%;
position: absolute;
text-align: right;
}
.switch label:last-of-type {
position: absolute;
right: -75%;
text-align: left;
}
.switch input {
height: 64px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 160px;
z-index: 2;
}
.switch input:checked~label:first-of-type {
color: #fff;
}
.switch input:checked~label:last-of-type {
color: #808080;
}
.switch input:checked~label:first-of-type {
color: #808080;
}
.switch input:checked~label:last-of-type {
color: #fff;
}
.switch input:checked {
z-index: 0;
}
.switch input:checked~.toggle {
left: 4px;
}
.switch input~:checked~.toggle {
left: 100px;
}
.toggle {
background: #4a4a4a;
border-radius: 50%;
height: 56px;
left: 0;
position: absolute;
top: 4px;
-webkit-transition: left .2s ease;
-moz-transition: left .2s ease;
-ms-transition: left .2s ease;
-o-transition: left .2s ease;
transition: left .2s ease;
width: 56px;
z-index: 1;
}
.c-window {
display: block;
position: absolute;
width: 235px;
height: 235px;
margin: 0 auto;
border-radius: 100%;
border: 8px solid #FFB399;
background: #5ddfe8;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25) inset;
overflow: hidden;
transition: background 1s ease-in-out;
z-index:-1
}
input:last-of-type[type="radio"]:checked ~ .c-window {
background: #111;
}
<div class="container">
<div class="switch white">
<input type="radio" name="switch" id="switch-off">
<input type="radio" name="switch" id="switch-on" checked>
<label for="switch-off">On</label>
<label for="switch-on">Off</label>
<span class="toggle"></span>
<div class="c-window"></div>
</div>
<!-- end switch -->
</div>
<!-- end container -->
Can't you do it in javascript/jQuery?
HTML:
<div class="container">
<div class="c-window"></div>
<div class="switch white">
<input type="radio" name="switch" value="0" id="switch-off" class="switch">
<input type="radio" name="switch" value="1" id="switch-on" class="switch" checked>
<label for="switch-off">On</label>
<label for="switch-on">Off</label>
<span class="toggle"></span>
</div> <!-- end switch -->
</div> <!-- end container -->
jQuery (to catch the change event):
$(document).ready(function(){
$('.switch').on('change', function(ev){
if ($(this).val() == 0){
//do some stuff you want when off
}else{
//do some stuff you want when on
}
});
});
If you want to use ~ selector your code should go like this
body, html {
margin: 0;
padding: 0;
}
.content {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
position: relative;
}
.c-window {
position: absolute;
transition: all 0.3s ease-in;
width: 235px;
height: 235px;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #aaa;
border: 5px solid black;
z-index: 1;
}
input {
position: relative;
z-index: 2;
}
#switch-off:checked ~ .c-window {
background: blue;
}
#switch-on:checked ~ .c-window {
background: #aaa;
}
<div class="content">
<input type="radio" name="switch" id="switch-off">
<input type="radio" name="switch" id="switch-on" checked>
<div class="c-window"></div>
</div>