I'm designing an element for a plugin called elementor. This project is really just to help me learn the functionality of developing for wordpress.
What I'm making is a "toggle content" slider that can toggle between text or predefined html. I've used the slider according to this guide: https://www.w3schools.com/howto/howto_css_switch.asp
Right Now the size of a switch is very big. I want a small switch. How Can change it? Can anyone help me out? Thanks.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
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%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class=" switch">
<input type="checkbox" checked>
<span class=" slider round"></span>
</label>
</body>
</html>
I used calc(); and var();, so you don't have to do a lot of work
Mozilla documentation: calc() explanation and var() explanation and --var: ; explanation .
just change ONE value the height of switch for change all responsively!!!
* {
--switch-height: 34px; /* change the value */
/* other code, pls see it then */
}
if you want a smaller switch, the 8px default padding, will take a lot of space,
so I simplified it for you! just change the --switch-padding: 8px; to something smaller...
automatically CSS calculates all things for you, for making the switch look good for all dimensions :)
the same thing if you want the switch to be bigger, remember to make the padding also bigger (the padding var)
I know This is not a site "we-are-doing-your-work.com" but I really want to help you!
here the complete fixed code:
* {
--switch-height: 34px;
--switch-padding: 8px;
--switch-width: calc((var(--switch-height) * 2) - var(--switch-padding));
--slider-height: calc(var(--switch-height) - var(--switch-padding));
--slider-on: calc(var(--switch-height) - var(--switch-padding));
}
.switch {
position: relative;
display: inline-block;
width: var(--switch-width);
height: var(--switch-height);
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
content: "";
position: absolute;
height: var(--slider-height);
width: var(--slider-height);
left: calc(var(--switch-padding) / 2);
bottom: calc(var(--switch-padding) / 2);
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
transform: translateX(var(--slider-on));
}
.slider.round {
border-radius: var(--slider-height);
}
.slider.round:before {
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</body>
</html>
* {
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.label{
background-color: #fea621;
display: flex;
border-radius: 50px;
height: 26px;
width: 50px;
align-items: center;
justify-content: space-between;
padding: 5px;
position: relative;
}
.checkbox{
opacity: 0;
position: absolute;
}
.checkbox + .label .ball{
content: url(323329.png);
background-color: #001e3d;
}
.checkbox:checked + .label .ball{
content: url(flag-ukraine-circle.svg);
background-color: #001e3d;
transform: translateX(24px);
}
.ball{
background-color: #001e3d;
border-radius: 50%;
height: 22px;
width: 22px;
position: absolute;
top: 2px;
left: 2px;
transition: transform .2s linear;
}
.ball:before:checked{
content: url(flag-ukraine-circle.svg);
left: 50px;
}
.ball:checked:after{
left: 0;
}
<div>
<input type="checkbox" id="checkbox" class="checkbox">
<label for="checkbox" class="label">
<i class="ukraine"></i>
<i class="usa"></i>
<div class="ball"></div>
</label>
</div>
You can change the size by changing the css
.switch {
position: relative;
display: inline-block;
width: 35px;
height: 22px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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: 10px;
width: 10px;
left: 4px;
bottom: 6px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(16px);
-ms-transform: translateX(16px);
transform: translateX(16px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class=" switch">
<input type="checkbox" checked>
<span class=" slider round"></span>
</label>
</body>
</html>
try to experiment with different widths and heights
Related
Unable to focus on rectangle outside of toggle switch on selecting and I wanted to add the functionality to focus on the label class which is used for outside rectangle of toggle switch, but was completely stuck. I am trying to do, is if the switch is pressed, then focus should be on rectangle box. I am using below HTML and CSS. Any help appreciated.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
position: relative;
border: 1px solid rgb(112, 112, 112);
display: flex;
align-items: center;
width: 280px;
height: 70px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
left:234px;
position: absolute;
cursor: pointer;
top: 20px;
right: 0;
bottom: 0;
height: 24px;
width: 40px;
background-color: grey;
-webkit-transition: 4s;
transition: 4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
.switch:hover{
box-shadow: 0 0 10px red;
}
.switch:active{
border-radius: 5 10px;
}
.switch:focus{
background-color: #0064D2;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(100%);
}
.switch label {
position: absolute;
left:2px;
width: 234px;
height: 22px;
color: rgb(65, 65, 65);
font-size: 16px;
font-weight: normal;
letter-spacing: 0.15px;
line-height: 22px;
}
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<label for="toggle-switch"
>Switch label
</label>
<input type="checkbox" id="toggle-switch">
<span class="slider round"></span>
</label>
</body>
</html>
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
Basically, I am trying to create a toggle bar with a day and night system. Once you toggle the bar, it either leads to day or night. I have the toggle bar, but I am having trouble implementing the day and night system. Once the user toggles to day or night, I want the background to be light blue for day and black for dark blue for night. I want the colors to switch depending if the user is on day or night. How can I do this? The toggle code is down below. Here is the link for the code I am using if it's easier to read in this format: https://codepen.io/bnthor/pen/WQBNxO
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="toggleWrapper">
<input type="checkbox" class="dn" id="dn"/>
<label for="dn" class="toggle">
<span class="toggle__handler">
<span class="crater crater--1"></span>
<span class="crater crater--2"></span>
<span class="crater crater--3"></span>
</span>
<span class="star star--1"></span>
<span class="star star--2"></span>
<span class="star star--3"></span>
<span class="star star--4"></span>
<span class="star star--5"></span>
<span class="star star--6"></span>
</label>
</div>
</body>
</html>
CSS
body {
background-color: #1e314f;
font-family: 'Helvetica Rounded', 'Arial Rounded MT Bold', 'Montserrat', sans-serif;
color: #fff;
}
.toggleWrapper {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
padding: 0 200px;
transform: translate3d(-50%, -50%, 0);
}
.toggleWrapper input {
position: absolute;
left: -99em;
}
.toggle {
cursor: pointer;
display: inline-block;
position: relative;
width: 90px;
height: 50px;
background-color: #83d8ff;
border-radius: 84px;
transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.toggle:before {
content: 'AM';
position: absolute;
left: -50px;
top: 15px;
font-size: 18px;
}
.toggle:after {
content: 'PM';
position: absolute;
right: -48px;
top: 15px;
font-size: 18px;
color: #749ed7;
}
.toggle__handler {
display: inline-block;
position: relative;
z-index: 1;
top: 3px;
left: 3px;
width: 44px;
height: 44px;
background-color: #ffcf96;
border-radius: 50px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform: rotate(-45deg);
}
.toggle__handler .crater {
position: absolute;
background-color: #e8cda5;
opacity: 0;
transition: opacity 200ms ease-in-out;
border-radius: 100%;
}
.toggle__handler .crater--1 {
top: 18px;
left: 10px;
width: 4px;
height: 4px;
}
.toggle__handler .crater--2 {
top: 28px;
left: 22px;
width: 6px;
height: 6px;
}
.toggle__handler .crater--3 {
top: 10px;
left: 25px;
width: 8px;
height: 8px;
}
.star {
position: absolute;
background-color: #fff;
transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
border-radius: 50%;
}
.star--1 {
top: 10px;
left: 35px;
z-index: 0;
width: 30px;
height: 3px;
}
.star--2 {
top: 18px;
left: 28px;
z-index: 1;
width: 30px;
height: 3px;
}
.star--3 {
top: 27px;
left: 40px;
z-index: 0;
width: 30px;
height: 3px;
}
.star--4, .star--5, .star--6 {
opacity: 0;
transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.star--4 {
top: 16px;
left: 11px;
z-index: 0;
width: 2px;
height: 2px;
transform: translate3d(3px, 0, 0);
}
.star--5 {
top: 32px;
left: 17px;
z-index: 0;
width: 3px;
height: 3px;
transform: translate3d(3px, 0, 0);
}
.star--6 {
top: 36px;
left: 28px;
z-index: 0;
width: 2px;
height: 2px;
transform: translate3d(3px, 0, 0);
}
input:checked + .toggle {
background-color: #749dd6;
}
input:checked + .toggle:before {
color: #749ed7;
}
input:checked + .toggle:after {
color: #fff;
}
input:checked + .toggle .toggle__handler {
background-color: #ffe5b5;
transform: translate3d(40px, 0, 0) rotate(0);
}
input:checked + .toggle .toggle__handler .crater {
opacity: 1;
}
input:checked + .toggle .star--1 {
width: 2px;
height: 2px;
}
input:checked + .toggle .star--2 {
width: 4px;
height: 4px;
transform: translate3d(-5px, 0, 0);
}
input:checked + .toggle .star--3 {
width: 2px;
height: 2px;
transform: translate3d(-7px, 0, 0);
}
input:checked + .toggle .star--4, input:checked + .toggle .star--5, input:checked + .toggle .star--6 {
opacity: 1;
transform: translate3d(0, 0, 0);
}
input:checked + .toggle .star--4 {
transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
input:checked + .toggle .star--5 {
transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
input:checked + .toggle .star--6 {
transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
So you just edit body element like:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body id="body">
<div class="toggleWrapper">
<input type="checkbox" class="dn" id="dn" onclick="changeBack()"/>
<label for="dn" class="toggle">
<span class="toggle__handler">
<span class="crater crater--1"></span>
<span class="crater crater--2"></span>
<span class="crater crater--3"></span>
</span>
<span class="star star--1"></span>
<span class="star star--2"></span>
<span class="star star--3"></span>
<span class="star star--4"></span>
<span class="star star--5"></span>
<span class="star star--6"></span>
</label>
</div>
</body>
</html>
And you can use javascript to change background:
<script>
function changeBack() {
var checkBox = document.getElementById("dn");
if (checkBox.checked == true) {
document.getElementById("body").style.backgroundColor = "lightblue";
}
else {
document.getElementById("body").style.backgroundColor = "black";
}
}
</script>
EDITED
<input type="checkbox" class="dn" id="dn" onclick="changeBack()"/>
and all JS
There's a little royalblue background appearing (between border-bottom: 2px solid white; & ::after element) when I unfocus.
I don't know why is that happening.
body {
background-color: royalblue;/*#f0f0f0;*/
}
label {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
position: relative;
}
.head {
color: white;
margin-left: 44%;
font-family: monospace;
font-size: 25px;
}
/*.content {
margin-top: 10%;
margin-left: 41%;
}*/
.password {
margin-top: 8%;
}
form {
position: relative;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
background: transparent;
border: 0; /* BORDER yes/no */
border-bottom: 2px solid white;
background: transparent;
outline: 0;
height: 25px;
width: 180px;
z-index: 1;
margin-top: 5px;
}
/*input:focus {
outline: 1;
}*/
label::after {
content: '';
position: absolute;
top: -2px;
left: 0;
width: 180px;
height: 25px;
border-radius: 2px;
transition: transform .3s;
}
label::after{
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: 0% 0%;
}
input:focus {
border-radius: 1px;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1, 1);
transition-timing-function: linear;
}
span {
position: relative;
margin-top: -30px;
display: block;
padding: .6em 0;
padding-left: -5px;
transition: top .5s ease, font-size .5s ease;
/* transition: transform 1s 2s;*/
top: 0;
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
padding-bottom: 15px;
}
/* font-family: monospace;*/
/*transform: translate3d(0, -80%, 0); */
/* transition-timing-function: linear;*/
<!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="content">
<div class="username">
<input type="text" name="name" class="user-input" id="user" required /> <!--input field-->
<label class="user-label" for="user"><span>Username</span></label>
</div>
<div class="password">
<input type="text" name="name" class="pass-input" id="pass" required /> <!-- input field -->
<label class="pass-label" for="pass"><span>Password</span></label>
</div>
</div>
</form>
</body>
</html>
Update:
I changed to top: 1px;, also change border-bottom to black, now this is the result (full code). Why is there some excess scale at the bottom? how to remove those?
You have a top: -2px on label, and your problem is when you blur, so a solution is move top: -2px to input:focus + label::after and input:focus + label::after, so you dont have that gap when its not focused or validated
body {
background-color: royalblue;/*#f0f0f0;*/
}
label {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
position: relative;
}
.head {
color: white;
margin-left: 44%;
font-family: monospace;
font-size: 25px;
}
/*.content {
margin-top: 10%;
margin-left: 41%;
}*/
.password {
margin-top: 8%;
}
form {
position: relative;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
background: transparent;
border: 0; /* BORDER yes/no */
border-bottom: 2px solid white;
background: transparent;
outline: 0;
height: 25px;
width: 180px;
z-index: 1;
margin-top: 5px;
}
/*input:focus {
outline: 1;
}*/
label::after {
content: '';
position: absolute;
left: 0;
width: 180px;
height: 25px;
border-radius: 2px;
transition: transform .3s;
}
label::after{
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: 0% 0%;
}
input:focus {
border-radius: 1px;
}
input:focus + label,
input:valid + label {
top: -2px;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1, 1);
transition-timing-function: linear;
}
span {
position: relative;
margin-top: -30px;
display: block;
padding: .6em 0;
padding-left: -5px;
transition: top .5s ease, font-size .5s ease;
top: 0;
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
padding-bottom: 15px;
}
/* font-family: monospace;*/
/*transform: translate3d(0, -80%, 0); */
/* transition-timing-function: linear;*/
<!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="content">
<div class="username">
<input type="text" name="name" class="user-input" id="user" required /> <!--input field-->
<label class="user-label" for="user"><span>Username</span></label>
</div>
<div class="password">
<input type="text" name="name" class="pass-input" id="pass" required /> <!-- input field -->
<label class="pass-label" for="pass"><span>Password</span></label>
</div>
</div>
</form>
</body>
</html>
you have an extra code, you can see here in comment section
label::after {
content: '';
position: absolute;
/*top: -2px;*/
left: 0;
width: 180px;
height: 25px;
border-radius: 2px;
transition: transform .3s;
}
Add top:1px on label::after See Below.
label::after {
content: '';
position: absolute;
left: 0;
top: 1px;
width: 180px;
height: 25px;
border-radius: 2px;
transition: transform .3s;
}
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>