I have a toggle switch below and I'm trying to position it somewhere else on my page but for some reason it doesn't go past this tiny bubble of space. I added the 'top' and left' elements under .switch{ but as I increase the numbers, the button stays put. Does anyone know how to fix this? There are position elements in the other classes and whenever I change the numbers, the toggle switch and text gets all messed up. I want to be able to move the button in its entirety.
html:
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<!--ADDED HTML -->
<span class="on">ON</span>
<span class="off">OFF</span>
<!--END-->
</div>
</label>
css:
.switch {
position: absolute;
display: inline-block;
width: 90px;
height: 34px;
top: 500;
left: 600;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}
top & left value need unit eg. 500px, 50rem or 10% but why you added position :absolute in .switch class, if position required for your case then ok, but using absolute positioning the switch is not proper solution
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to move the label above the input field when focus like this.
But in my other code, it only changes font-size and is not moving up. What am I missing?
I use the same CSS code for both:
CSS
input:focus + label > span {
font-size: 12px;
transform: translate3d(0, -80%, 0);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
Target The Span Within The Lable
If you target the span contained in the label, you can control it with the below code.
input + label > span {
position: relative;
display: block;
bottom: -1em
}
Your code needs a lot of work, but start here:
body {
background-color: #f0f0f0;
}
form {
margin-left: 40%;
margin-top: 11%;
}
label {
font-family: monospace; 'Montserrat', sans-serif;
font-size: 19px;
margin-left: -26%;
z-index: -1;
/* border: 5px solid black;*/
}
.head {
margin-left: 43%;
margin-top: 5%;
font-size: 25px;
font-family: monospace;
}
form {
position: relative; }
.input-field {
display:block;
background: transparent;
border-width: 2px;
border-top: 0;
border-left: 0;
border-right: 0;
border: 0;
background: transparent;
outline: 0;
height: 23px;
border-color: black;
width: 130px;
z-index: 1;
margin-left: 0%;
}
/*input:focus {
transform: scale3d(1, 1, 1);
transition: width 5s;
transition-delay: 3s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
z-index: -1;
background: green; /* ::after background *
} */
label::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 30%;
height: 20%;
transition: transform 0.8s;
}
label::after {
z-index: -1;
background: green; /* ::after background */
transform: scale3d(1, 0.1, 1);
transform-origin: 0% 0%;
}
input:focus + label::after {
transform: scale3d(1, -2, 1);
transition-timing-function: linear;
}
input:focus + label > span {
font-size: 14px;
transform: translate3d(0, -200%, 0);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
input + label > span {
position: relative;
display: block;
bottom: -1em
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<title>Test</title>
</head>
<body>
<p class="head">Sign In</p>
<form>
<div class="username">
<input type="text" name="name" class="input-field" id="user"/> <!--input filed-->
<label for="user">
<span class="username">Username</span>
</label>
</div>
</form>
</body>
</html
Filtered Code. You can Use This Code. This is working Fine.
.object {
position: relative;
z-index: 1;
display: inline-block;
width: 300px; /* input field width */
}
.input {
position: relative;
display: block;
float: right;
width: 30%;
border: none;
background: black;
color: yellow; /* font color when typing */
font-family: monospace;
/* for box shadows to show on iOS */
}
.input:focus {
outline: none;
}
.label {
display: inline-block;
color: black; /* label font color */
font-size: 18px;
font-family: monospace;
}
.label-content {
position: relative;
display: block;
padding: .6em 0;
}
.input--jiro {
padding: 0.85em 0.5em;
width: 100%; /* input width when focus */
background: blue ; /* input background color */
opacity: 0;
transition: opacity 0.3s;
}
.label-content--jiro {
transition: transform 0.3s 0.3s;
}
.label--jiro {
position: absolute;
left: 0;
padding: 0 0.85em;
width: 120%; /* underline width */
height: 100%;
}
label::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 80%;
height: 100%;
transition: transform .8s;
}
label::after {
z-index: -1;
background: green; /* ::after background */
transform: scale3d(1, 0.1, 1);
transform-origin: 0% 0%; /* 0% 50%; * for middle */
}
input:focus + label::after {
transform: scale3d(1, -1, 1);
transition-timing-function: linear;
}
input:focus + label > span {
font-size: 12px;
transform: translate3d(0, -80%, 0);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
<p class="head">Sign In</p>
<section>
<span class="object">
<input class="input input--jiro" type="text" id="input-10" /> <!-- input field -->
<label class="label label--jiro" for="input-10">
<span class="label-content label-content--jiro">Username</span> <!-- Label -->
</label>
</span>
</section>
I have a switch toggle button for an HTML page
<div>
<label class="switch" style="margin-left:14em;">
<h5>Profile</h5>
<input id="profile-toggle" checked type="checkbox">
<span class="slider round"></span>
</label>
</div>
It shows on the page like this:
I am trying to bring the label to the left side, similar to this:
Does anyone have an idea on how can I do this?
EDIT Toggle CSS
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e61610;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #29b6f6;
}
input:focus + .slider {
box-shadow: 0 0 1px #29b6f6;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
PS
The toggle switch works fine, my problem is to bring the label to the left side, in front of the button.
Add this bunch of css code and you are all good.
.switch h5 {
position: absolute;
left: -14rem;
top: 0;
margin: 0.75rem;
}
Try this
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 28px;
margin-left:14em;
}
/* Hide default HTML checkbox */
.switch input {
display: none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: green;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 1px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: green;
}
input:focus+.slider {
box-shadow: 0 0 1px #29b6f6;
}
input:checked+.slider:before {
-webkit-transform: translateX(2px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.switch h5 {
position: relative;
left: -200px;
top: -50%;
width: 175px;
}
<div>
<label class="switch">
<h5>Do you want to check</h5>
<input id="profile-toggle" checked type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<label class="switch">
<h5>Check Grammar and Spelling on Stackoverflow.com</h5>
<input id="profile-toggle" checked type="checkbox">
<span class="slider round"></span>
</label>
</div>
Okay, I'm totally unaware how I can do this. If the title wasn't clear enough, let me better describe what I want to accomplish.
Right now it's showing metric and the input checked, once you click the toggle button, the white circle will move from right to left, I'd like to hide the text as the circle is hovering on top of it while moving from right to left instead of how it's being hidden right now.
And the same goes for imperial.
I'm trying to grasp how to do this, but I really can't wrap my mind around it.
.text { position: relative; top: 8px; padding: 0 7px; font-size: 14px; }
input + .slider .off { display:none; }
input:checked + .slider .off { display:block; }
input + .slider .on { display:block; }
input:checked + .slider .on { display:none; }
.on { float: right; }
.switch { position: relative; display: inline-block; width: 100px; height: 34px; }
.switch input {display:none;}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #eb974e; }
input:focus + .slider { box-shadow: 0 0 1px #eb974e; }
input:checked + .slider:before {-webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
<label class="switch">
<input type="checkbox" checked>
<span class="slider round">
<span class="text off">Metric</span>
<span class="text on">Imperial</span>
</span>
</label>
Change the text to Visibility: hidden; or Opacity: 0; and make it
position: absolute; so it doesn't interfere with your other text. do the same for the other one and you should be able to style the fade.
Using Display: none; does'nt allow you to transition it, it will always just pop out of existence.
I'm having trouble getting a toggle switch from the w3c tutorial to line up with some text beside it.
this is the tutorial https://www.w3schools.com/howto/howto_css_switch.asp
and this is my code:
<div class="sliderWrapper">
<div><?php echo __('Postal Address');?> </div>
<label class="switch">
<input type="checkbox" name="data[SplashPage][firstname]">
<span class="slider"></span>
</label>
</div>
<div class="sliderWrapper">
<div><?php echo __('Postal Address');?> </div>
<label class="switch">
<input type="checkbox" name="data[SplashPage][lastname]">
<span class="slider"></span>
</label>
</div>
.sliderWrapper{display: inline-block;margin:24px 24px 24px 24px;}
.sliderWrapper div{display: inline-block;line-height:60px;}
.switch {
position: relative;
display: inline-block;
padding:0px;
width: 54px;
height: 28px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #d7d7d7;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 1px;
bottom: 1px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {background-color: #1fb5ad;}
input:focus + .slider {box-shadow: 0 0 1px #1fb5ad;}
input:checked + .slider:before {-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);transform: translateX(26px);}
Can anyone help me out with making the text be vertically aligned with the switch - been banging my head on the table of hours now :-(
jsfiddle: https://jsfiddle.net/vfjgtaoh/
Add the line:
vertical-align: middle;
to your switch class, this will vertically align the contents
Fiddle: https://jsfiddle.net/tzv75zvk/
Add Vertical-align:middle; property to label tag and remove line-height for the div
.sliderWrapper div{
display: inline-block;
}
.switch {
position: relative;
display: inline-block;
padding:0px;
vertical-align:middle;
width: 54px;
height: 28px;
}
Link for reference
I have this toggle switch which I want to bring into my site.
https://jsfiddle.net/njxfnfoa/
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</div>
And the CSS is long, so I'll just keep that in the JSFiddle.
However as you can see it looks quite jagged. The PDF design I'm working to looks like this.
How can I better replicate this smooth border?
use border: 1px solid rgba(211,211,211, .8); so you have control over the Border Opacity (0.8 here)
.switch-container{
position:relative;
}
.switch {
position: relative;
display: inline-block;
width: 65px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
display: none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border: 1px solid rgba(211,211,211, .8);
}
.slider:before {
position: absolute;
content: "";
height: 32px;
width: 32px;
left: 0px;
background-color: #73c82b;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: white;
}
input:focus + .slider {
box-shadow: 0 0 1px white;
}
input:checked + .slider:before {
-webkit-transform: translateX(31px);
-ms-transform: translateX(31px);
transform: translateX(31px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</div>
You just need to fine tune the css in
.slider:before
a little bit: js fiddle