Align label contents after checkbox css

Align label contents after checkbox css - html

I have styled Checkbox from this source as below:
.toggle-button {
margin: 0 20px;
}
/*
* Toggle button styles
*/
.toggle-button {
position: relative;
display: inline-block;
color: rgb(80, 77, 77);
}
.toggle-button label {
display: inline-block;
cursor: pointer;
text-align: left;
}
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
.toggle-button__icon:before,
.toggle-button__icon:after {
content: "";
position: absolute;
top: 45%;
left: 35%;
transition: 0.2s ease-out;
}
.toggle-button--tuli label {
line-height: 20px;
text-indent: 30px;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon {
background: #fff;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:before,
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:after {
opacity: 1;
}
.toggle-button--tuli .toggle-button__icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
transition: all 0.2s;
border: 2px solid rgb(37, 146, 236);
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.toggle-button--tuli .toggle-button__icon:before,
.toggle-button--tuli .toggle-button__icon:after {
top: 5px;
left: 2px;
width: 12px;
height: 2px;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
top: 35%;
background: #0175b2;
opacity: 0;
transform-origin: left center;
}
.toggle-button--tuli .toggle-button__icon:before {
transform: translate(0, 0) rotate(45deg) scale(0.6, 1);
}
.toggle-button--tuli .toggle-button__icon:after {
transform: translate(4px, 6px) rotate(-45deg);
}
.toggle-button--tuli:hover input[type=checkbox]:not(:checked)~.toggle-button__icon {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="toggle-button toggle-button--tuli">
<input id="toggleButton11" type="checkbox">
<label for="toggleButton11">I confirm that I have read and agree to the Terms of Use specified by the client and some long text to continue with to show the alignment below checkbox</label>
<div class="toggle-button__icon"></div>
</div>
If you run the snippet you can see that when label contents break the line it comes below the checkbox. How can I modify the css to align label contents to appear after the checkbox. I've tried text-indent but that only works for 1st line. Hope to find some help.

Instead of text-indent use padding-left and it will work as you wish:
.toggle-button {
margin: 0 20px;
}
/*
* Toggle button styles
*/
.toggle-button {
position: relative;
display: inline-block;
color: rgb(80, 77, 77);
}
.toggle-button label {
display: inline-block;
cursor: pointer;
text-align: left;
}
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
.toggle-button__icon:before,
.toggle-button__icon:after {
content: "";
position: absolute;
top: 45%;
left: 35%;
transition: 0.2s ease-out;
}
.toggle-button--tuli label {
line-height: 20px;
padding-left: 30px;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon {
background: #fff;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:before,
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:after {
opacity: 1;
}
.toggle-button--tuli .toggle-button__icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
transition: all 0.2s;
border: 2px solid rgb(37, 146, 236);
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.toggle-button--tuli .toggle-button__icon:before,
.toggle-button--tuli .toggle-button__icon:after {
top: 5px;
left: 2px;
width: 12px;
height: 2px;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
top: 35%;
background: #0175b2;
opacity: 0;
transform-origin: left center;
}
.toggle-button--tuli .toggle-button__icon:before {
transform: translate(0, 0) rotate(45deg) scale(0.6, 1);
}
.toggle-button--tuli .toggle-button__icon:after {
transform: translate(4px, 6px) rotate(-45deg);
}
.toggle-button--tuli:hover input[type=checkbox]:not(:checked)~.toggle-button__icon {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="toggle-button toggle-button--tuli">
<input id="toggleButton11" type="checkbox">
<label for="toggleButton11">I confirm that I have read and agree to the Terms of Use specified by the client and some long text to continue with to show the alignment below checkbox</label>
<div class="toggle-button__icon"></div>
</div>

For the label, use padding instead of text-indent:
.toggle-button--tuli label {
line-height: 20px;
padding-left: 30px;
}
It will add padding left for the text and the button will be aligned to the left side because it is positioned absolutely.

If you remove the text-indent and instead use padding-left that should work.
.toggle-button {
margin: 0 20px;
}
/*
* Toggle button styles
*/
.toggle-button {
position: relative;
display: inline-block;
color: rgb(80, 77, 77);
}
.toggle-button label {
display: inline-block;
cursor: pointer;
text-align: left;
}
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
.toggle-button__icon:before,
.toggle-button__icon:after {
content: "";
position: absolute;
top: 45%;
left: 35%;
transition: 0.2s ease-out;
}
.toggle-button--tuli label {
line-height: 20px;
padding-left: 30px;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon {
background: #fff;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:before,
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:after {
opacity: 1;
}
.toggle-button--tuli .toggle-button__icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
transition: all 0.2s;
border: 2px solid rgb(37, 146, 236);
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.toggle-button--tuli .toggle-button__icon:before,
.toggle-button--tuli .toggle-button__icon:after {
top: 5px;
left: 2px;
width: 12px;
height: 2px;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
top: 35%;
background: #0175b2;
opacity: 0;
transform-origin: left center;
}
.toggle-button--tuli .toggle-button__icon:before {
transform: translate(0, 0) rotate(45deg) scale(0.6, 1);
}
.toggle-button--tuli .toggle-button__icon:after {
transform: translate(4px, 6px) rotate(-45deg);
}
.toggle-button--tuli:hover input[type=checkbox]:not(:checked)~.toggle-button__icon {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="toggle-button toggle-button--tuli">
<input id="toggleButton11" type="checkbox">
<label for="toggleButton11">I confirm that I have read and agree to the Terms of Use specified by the client and some long text to continue with to show the alignment below checkbox</label>
<div class="toggle-button__icon"></div>
</div>
I've updated the answer. padding-left will allow the click to to be detected.

.toggle-button {
margin: 0 20px;
position: relative;
display: inline-block;
color: #504d4d
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none
}
.toggle-button label {
display: inline-block;
cursor: pointer;
text-align: left
}
.toggle-button input {
display: none
}
.toggle-button--tuli label {
line-height: 20px;
padding-left: 25px
}
.toggle-button__icon:before,
.toggle-button__icon:after {
content: "";
position: absolute;
top: 45%;
left: 35%;
transition: .2s ease-out
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon {
background: #fff
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:before,
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:after {
opacity: 1
}
.toggle-button--tuli .toggle-button__icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
transition: all .2s;
border: 2px solid #2592ec;
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1)
}
.toggle-button--tuli .toggle-button__icon:before,
.toggle-button--tuli .toggle-button__icon:after {
top: 5px;
left: 2px;
width: 12px;
height: 2px;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
top: 35%;
background: #0175b2;
opacity: 0;
transform-origin: left center
}
.toggle-button--tuli .toggle-button__icon:before {
transform: translate(0, 0) rotate(45deg) scale(0.6, 1)
}
.toggle-button--tuli .toggle-button__icon:after {
transform: translate(4px, 6px) rotate(-45deg)
}
.toggle-button--tuli:hover input[type=checkbox]:not(:checked)~.toggle-button__icon {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="toggle-button toggle-button--tuli">
<input id="toggleButton11" type="checkbox">
<label for="toggleButton11">I confirm that I have read and agree to the Terms of Use specified by the client and some long text to continue with to show the alignment below checkbox</label>
<div class="toggle-button__icon"></div>
</div>
Here you go

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="checkbox">
<label><input type="checkbox"> I confirm that I have read and agree to the Terms
of Use specified by the client and some long text to continue with to show the alignment below checkbox
I confirm that I have read and agree to the Terms
of Use specified by the client and some long text to continue with to show the alignment below checkbox</label>
</div>
Try this code..

Related

how do I reposition a styled label to a corner of its div?

How would I move the content inside of .toggle-button to the far right lower corner?
I am new to html and css but from what I understand I've played around with the flex settings, margins, and paddings and I'm not having any luck figuring this out
Here is my code. I am only concerned with the page-header div (color blue border) and the toggle-button div (color purple)
.mypage{
border: 1px solid black;
}
.row {
margin: 10px;
width: 100%;
}
.page-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid blue;
margin-right: 1vh;
}
.date-dropdown{
border: 1px solid red;
flex-grow: 1;
display: flex;
}
.dates-label {
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
.dates-select {
margin-left: 1vh;
}
.title-wrapper {
border: 1px solid orange;
flex-grow: 1;
text-align: center;
}
.toggle-button{
border: 1px solid purple;
flex-grow: 1;
}
/* ============= TOGGLE Button ======= */
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-yes-no {
padding: 0;
margin: 15px 0 0;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch-yes-no .switch-label {
box-shadow: none;
background: none;
}
.switch-yes-no .switch-label:after, .switch-yes-no .switch-label:before {
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-label:after {
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch-yes-no .switch-label:before {
background: #eceeef;
backface-visibility: hidden;
}
.switch-yes-no .switch-handle {
display: none;
}
.switch-yes-no .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-yes-no .switch-input:checked ~ .switch-label:before {
transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked ~ .switch-label:after {
transform: rotateY(0)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 boilerplate – all you really need…</title>
<link rel="stylesheet" href="css/styles.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="home">
<div class="mypage">
<div class="row">
<div class="page-header">
<div class="date-dropdown">
<div class="dates-label">
<label for="dropdown">
Choose a date
</label>
</div>
<div class="dates-select">
<select name="dropdown" id="datesid">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</div>
<div class="title-wrapper">
<h1>Welcome</h1>
</div>
<div class="toggle-button">
<label class="switch switch-yes-no">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="table-pie-wrapper">
<div class="table">
i am a table
</div>
<div class="pie-graph">
i am a pie graph
</div>
</div>
</div>
<div class="row">
<div class="table-summary-wrapper">
<div class="table-summary">
i am a table summary
</div>
</div>
</div>
</div>
</body>
</html>

I addded following css rules toggle-button class
display: flex;
justify-content: end;
Please check the following code snippet
.mypage{
border: 1px solid black;
}
.row {
margin: 10px;
width: 100%;
}
.page-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid blue;
margin-right: 1vh;
}
.date-dropdown{
border: 1px solid red;
flex-grow: 1;
display: flex;
}
.dates-label {
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
.dates-select {
margin-left: 1vh;
}
.title-wrapper {
border: 1px solid orange;
flex-grow: 1;
text-align: center;
}
.toggle-button{
border: 1px solid purple;
flex-grow: 1;
display: flex;
justify-content: end;
}
/* ============= TOGGLE Button ======= */
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
text-align: right;
background-color: red;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-yes-no {
padding: 0;
margin: 15px 0 0;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch-yes-no .switch-label {
box-shadow: none;
background: none;
}
.switch-yes-no .switch-label:after, .switch-yes-no .switch-label:before {
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-label:after {
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch-yes-no .switch-label:before {
background: #eceeef;
backface-visibility: hidden;
}
.switch-yes-no .switch-handle {
display: none;
}
.switch-yes-no .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-yes-no .switch-input:checked ~ .switch-label:before {
transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked ~ .switch-label:after {
transform: rotateY(0)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 boilerplate – all you really need…</title>
<link rel="stylesheet" href="css/styles.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="home">
<div class="mypage">
<div class="row">
<div class="page-header">
<div class="date-dropdown">
<div class="dates-label">
<label for="dropdown">
Choose a date
</label>
</div>
<div class="dates-select">
<select name="dropdown" id="datesid">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</div>
<div class="title-wrapper">
<h1>Welcome</h1>
</div>
<div class="toggle-button">
<label class="switch switch-yes-no">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="table-pie-wrapper">
<div class="table">
i am a table
</div>
<div class="pie-graph">
i am a pie graph
</div>
</div>
</div>
<div class="row">
<div class="table-summary-wrapper">
<div class="table-summary">
i am a table summary
</div>
</div>
</div>
</div>
</body>
</html>

You can achieve this with margin-left: auto or in the shorthand that you used:
.switch-yes-no {
...
margin: 15px 0 0 auto;
}
Working example:
.mypage {
border: 1px solid black;
}
.row {
margin: 10px;
width: 100%;
}
.page-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid blue;
margin-right: 1vh;
}
.date-dropdown {
border: 1px solid red;
flex-grow: 1;
display: flex;
}
.dates-label {
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
.dates-select {
margin-left: 1vh;
}
.title-wrapper {
border: 1px solid orange;
flex-grow: 1;
text-align: center;
}
.toggle-button {
border: 1px solid purple;
flex-grow: 1;
}
/* ============= TOGGLE Button ======= */
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing: content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing: content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing: content-box;
}
.switch-label:before,
.switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing: content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked~.switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked~.switch-label:before {
opacity: 0;
}
.switch-input:checked~.switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked~.switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label,
.switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-yes-no {
padding: 0;
margin: 15px 0 0 auto;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch-yes-no .switch-label {
box-shadow: none;
background: none;
}
.switch-yes-no .switch-label:after,
.switch-yes-no .switch-label:before {
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-label:after {
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch-yes-no .switch-label:before {
background: #eceeef;
backface-visibility: hidden;
}
.switch-yes-no .switch-handle {
display: none;
}
.switch-yes-no .switch-input:checked~.switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-yes-no .switch-input:checked~.switch-label:before {
transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked~.switch-label:after {
transform: rotateY(0)
}
<div class="mypage">
<div class="row">
<div class="page-header">
<div class="date-dropdown">
<div class="dates-label">
<label for="dropdown">
Choose a date
</label>
</div>
<div class="dates-select">
<select name="dropdown" id="datesid">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</div>
<div class="title-wrapper">
<h1>Welcome</h1>
</div>
<div class="toggle-button">
<label class="switch switch-yes-no">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="table-pie-wrapper">
<div class="table">
i am a table
</div>
<div class="pie-graph">
i am a pie graph
</div>
</div>
</div>
<div class="row">
<div class="table-summary-wrapper">
<div class="table-summary">
i am a table summary
</div>
</div>
</div>
</div>
If you want the whole button to be in the right bottom corner you can use align-self: flex-end:
.toggle-button {
...
align-self: flex-end;
}
Working example:
.mypage {
border: 1px solid black;
}
.row {
margin: 10px;
width: 100%;
}
.page-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid blue;
margin-right: 1vh;
}
.date-dropdown {
border: 1px solid red;
flex-grow: 1;
display: flex;
}
.dates-label {
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
.dates-select {
margin-left: 1vh;
}
.title-wrapper {
border: 1px solid orange;
flex-grow: 1;
text-align: center;
}
.toggle-button {
border: 1px solid purple;
flex-grow: 1;
align-self: flex-end;
}
/* ============= TOGGLE Button ======= */
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing: content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing: content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing: content-box;
}
.switch-label:before,
.switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing: content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked~.switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked~.switch-label:before {
opacity: 0;
}
.switch-input:checked~.switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked~.switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label,
.switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-yes-no {
padding: 0;
margin: 15px 0 0;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch-yes-no .switch-label {
box-shadow: none;
background: none;
}
.switch-yes-no .switch-label:after,
.switch-yes-no .switch-label:before {
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-label:after {
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch-yes-no .switch-label:before {
background: #eceeef;
backface-visibility: hidden;
}
.switch-yes-no .switch-handle {
display: none;
}
.switch-yes-no .switch-input:checked~.switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-yes-no .switch-input:checked~.switch-label:before {
transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked~.switch-label:after {
transform: rotateY(0)
}
<div class="mypage">
<div class="row">
<div class="page-header">
<div class="date-dropdown">
<div class="dates-label">
<label for="dropdown">
Choose a date
</label>
</div>
<div class="dates-select">
<select name="dropdown" id="datesid">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</div>
<div class="title-wrapper">
<h1>Welcome</h1>
</div>
<div class="toggle-button">
<label class="switch switch-yes-no">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="table-pie-wrapper">
<div class="table">
i am a table
</div>
<div class="pie-graph">
i am a pie graph
</div>
</div>
</div>
<div class="row">
<div class="table-summary-wrapper">
<div class="table-summary">
i am a table summary
</div>
</div>
</div>
</div>

why is this html and css rendering differently on my webpage?

I really liked the toggle switch "Example 3" on this website and they provide the HTML/CSS code with it. Although, when I try it on my webpage it renders as a simple plain checkbox.
I have beginners knowledge of HTML/CSS but the code makes sense and I'm not sure what is wrong.
This is the code and the website attached on the bottom. Example 3 is what it's supposed to look like.
<style>
/* Switch Yes No
==========================*/
.switch-yes-no {
padding: 0;
margin: 15px 0 0;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch-yes-no .switch-label {
box-shadow: none;
background: none;
}
.switch-yes-no .switch-label:after, .switch-yes-no .switch-label:before {
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-label:after {
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch-yes-no .switch-label:before {
background: #eceeef;
backface-visibility: hidden;
}
.switch-yes-no .switch-handle {
display: none;
}
.switch-yes-no .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-yes-no .switch-input:checked ~ .switch-label:before {
transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked ~ .switch-label:after {
transform: rotateY(0)
}
</style>
<label class="switch switch-yes-no">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
Example 3 on this website in case needed
Example 3

You need to read the instruction carefully. On the top of the page you have a part The Common CSS. This style must be used for all examples below.
For example 3 you need to add the part you have used.
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-yes-no {
padding: 0;
margin: 15px 0 0;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch-yes-no .switch-label {
box-shadow: none;
background: none;
}
.switch-yes-no .switch-label:after, .switch-yes-no .switch-label:before {
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-label:after {
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch-yes-no .switch-label:before {
background: #eceeef;
backface-visibility: hidden;
}
.switch-yes-no .switch-handle {
display: none;
}
.switch-yes-no .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-yes-no .switch-input:checked ~ .switch-label:before {
transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked ~ .switch-label:after {
transform: rotateY(0)
}
<label class="switch switch-yes-no">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>

Yes, as the other answers suggest.. You need to add proper styling i.e., all the style classes or files needed. Also, I would like to add that include these files in their proper order inside your project. Remember, order is very important.

Display tooltip on hover in cutom toggle switch

I have a custom toggle switch created
When I mousehover on it if the switch is ON its should display the message on tooltip as YES and if OFF tooltip meassage should be NO.
How can I acheive this in custom toggle switch?
.switch {
position: relative;
width: 80px;
height: 30px;
background: #FFF;
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
float: left;
bottom: 3px;
right: 0;
}
.switch-input {
position: absolute;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 1px;
right: 100px;
width: 25px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 50px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* transitions */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-flat {
padding: 0;
background: #FFF;
background-image: none;
}
.switch-flat .switch-label {
background: #FFF;
border: solid 2px #eceeef;
box-shadow: none;
}
.switch-flat .switch-label:after {
color: #0088cc;
}
.switch-flat .switch-handle {
top: 4px;
left: 5px;
background: #dadada;
width: 22px;
height: 22px;
box-shadow: none;
}
.switch-flat .switch-handle:before {
background: #eceeef;
}
.switch-flat .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-flat .switch-input:checked ~ .switch-handle {
left: 55px;
background: #0088cc;
box-shadow: none;
}
<label class='switch switch-flat'>
<input class='switch-input both' type='checkbox' checked />
<span class='switch-label' data-on='ON' data-off='OFF'></span>
<span class='switch-handle'></span>
</label>

First of all added a <span> as class name as tooltiptext in html inside the switch label
<span class="tooltiptext">ON</span>
While toggling the swicth the text of tooltiptext span also changed by
$(".switch-input").change(function(){
if($(".switch-input").prop("checked")){
$(".tooltiptext").text("ON")
}else{
$(".tooltiptext").text("OFF");
}
});
The visiblity of tooltiptext become hidden while hover the switch become visible
.switch .tooltiptext {
visibility: hidden;
}
.switch:hover .tooltiptext {
visibility: visible;
}
$(".switch-input").change(function(){
if($(".switch-input").prop("checked")){
$(".tooltiptext").text("ON")
}else{
$(".tooltiptext").text("OFF");
}
});
.switch {
margin:50px 45%;
position: relative;
width: 80px;
height: 30px;
background: #FFF;
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
float: left;
bottom: 3px;
right: 0;
}
.switch-input {
position: absolute;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 1px;
right: 100px;
width: 25px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 50px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* transitions */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-flat {
padding: 0;
background: #FFF;
background-image: none;
}
.switch-flat .switch-label {
background: #FFF;
border: solid 2px #eceeef;
box-shadow: none;
}
.switch-flat .switch-label:after {
color: #0088cc;
}
.switch-flat .switch-handle {
top: 4px;
left: 5px;
background: #dadada;
width: 22px;
height: 22px;
box-shadow: none;
}
.switch-flat .switch-handle:before {
background: #eceeef;
}
.switch-flat .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-flat .switch-input:checked ~ .switch-handle {
left: 55px;
background: #0088cc;
box-shadow: none;
}
/* tooltip */
.switch .tooltiptext {
visibility: hidden;
width: 50px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 37px;
left: calc(50% - 25px);
}
.switch .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.switch:hover .tooltiptext {
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class='switch switch-flat'>
<input class='switch-input both' type='checkbox' checked />
<span class='switch-label' data-on='ON' data-off='OFF'></span>
<span class='switch-handle'></span>
<span class="tooltiptext">ON</span>
</label>

You can use script like this:
.switch {
position: relative;
width: 80px;
height: 30px;
background: #FFF;
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
float: left;
bottom: 3px;
right: 0;
}
.switch-input {
position: absolute;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 1px;
right: 100px;
width: 25px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 50px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* transitions */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-flat {
padding: 0;
background: #FFF;
background-image: none;
}
.switch-flat .switch-label {
background: #FFF;
border: solid 2px #eceeef;
box-shadow: none;
}
.switch-flat .switch-label:after {
color: #0088cc;
}
.switch-flat .switch-handle {
top: 4px;
left: 5px;
background: #dadada;
width: 22px;
height: 22px;
box-shadow: none;
}
.switch-flat .switch-handle:before {
background: #eceeef;
}
.switch-flat .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-flat .switch-input:checked ~ .switch-handle {
left: 55px;
background: #0088cc;
box-shadow: none;
}
.tooltip {
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<html>
<script>
function content_of_toolTip() {
if (document.getElementById("check").checked == true) {
document.getElementById("tooltipLabel").innerHTML = "yes"
}
if (document.getElementById("check").checked == false) {
document.getElementById("tooltipLabel").innerHTML = "no"
}
}
</script>
<body style="text-align:center;">
<label class='switch switch-flat tooltip'>
<input class='switch-input both' id="check" onchange=content_of_toolTip() type='checkbox' checked />
<span class='switch-label' data-on='ON' data-off='OFF' onmouseover="content_of_toolTip()" onfocus="content_of_toolTip(this)" ></span>
<span class='switch-handle'></span>
<span class="tooltiptext" id="tooltipLabel">Tooltip text</span>
</label>
</body>
</html>

How to make the animation play when the radio button is checked?

I tried to make a custom radio button which changes color and plays and animation when click upon. But I was just able to do that with hover, I tried to use the "input:checked" but it pretty much didn't work
When I hover on the radio button an animation takes place, but I want the animation to take place when I click the radio button. Please help me out with this!!
body{
margin: 0;
padding: 0;
}
.choose{
margin: 0;
padding: 0;
position: relative;
top: 0px;
display: block;
background: #262626;
height: 209px;
}
.choose input{
-webkit-appearance: none;
}
.choose #female{
position: absolute;
left: 65%;
}
.choose #male, #female{
position: absolute;
top: 50%;
left: 35%;
transform: translate(-50%,-50%);
background: #ffffff;
width: 70px;
height: 70px;
text-align: center;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: .5s;
font-size: 24px;
color: #262626;
}
.choose #male:hover{
background: #3c81de;
color: white;
}
.choose #female:hover{
background: #f23895;
color: white;
}
.choose #male .fas{
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #female .fas{
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #male .fas:hover{
animation: manimate 7s;
}
#keyframes manimate{
0%{
box-shadow: 0 0 0 0 rgb(90, 168, 217)
}
12%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
80%{
box-shadow: 0 0 0 0px rgba(255,109,74,0)
}
100%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
}
.choose #female .fas:hover{
animation: fanimate 7s;
}
#keyframes fanimate{
0%{
box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
}
12%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
80%{
box-shadow: 0 0 0 0px rgba(255,109,74,0)
}
100%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
}
<!DOCTYPE html>
<html>
<head>
<title>mvrikxix's Arena</title>
<link rel="stylesheet" href="PlaywithButtons.css">
<link rel="icon" href="mvrikxix.png">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>
<body>
<div class="choose">
<label>
<input type="radio"><span id="male")><i class="fas fa-mars"></i></span></input>
<input type="radio"><span id="female"><i class="fas fa-venus"></i></span></input>
</label>
</div>
</body>
</html>

It may have been an issue with the selector you were trying. This should work:
.choose input:checked + #male .fas {
...
}
body {
margin: 0;
padding: 0;
}
.choose {
margin: 0;
padding: 0;
position: relative;
top: 0px;
display: block;
background: #262626;
height: 209px;
}
.choose input {
-webkit-appearance: none;
}
.choose #female {
position: absolute;
left: 65%;
}
.choose #male,
#female {
position: absolute;
top: 50%;
left: 35%;
transform: translate(-50%, -50%);
background: #ffffff;
width: 70px;
height: 70px;
text-align: center;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: .5s;
font-size: 24px;
color: #262626;
}
.choose #male:hover {
background: #3c81de;
color: white;
}
.choose #female:hover {
background: #f23895;
color: white;
}
.choose #male .fas {
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #female .fas {
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #male .fas:hover {
animation: manimate 7s;
}
#keyframes manimate {
0% {
box-shadow: 0 0 0 0 rgb(90, 168, 217)
}
12% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
80% {
box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
}
100% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
}
.choose #female .fas:hover {
animation: fanimate 7s;
}
#keyframes fanimate {
0% {
box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
}
12% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
80% {
box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
}
100% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
}
.choose input:checked + #male .fas {
animation: manimate 7s;
}
.choose input:checked + #female .fas {
animation: fanimate 7s;
}
<!DOCTYPE html>
<html>
<head>
<title>mvrikxix's Arena</title>
<link rel="stylesheet" href="PlaywithButtons.css">
<link rel="icon" href="mvrikxix.png">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>
<body>
<div class="choose">
<label>
<input type="radio"><span id="male"><i class="fas fa-mars"></i></span>
<input type="radio"><span id="female"><i class="fas fa-venus"></i></span>
</label>
</div>
</body>
</html>

I guess your approach was totally fine. This also answers your question (have a look at the code below).
This code will trigger only once after selecting one of the two types. But this will trigger the animation on the radio button itself and not on the icon. If you inspect your code in the browser with some dev tools, you will notice that your radiobuttons have a size of 0x0 and they're placed in the very top left corner. So even if you trigger your animation. It will will be in the wrong place.
Either place the radiobuttons right behind the icons and make them the same size or create a trigger on the icon itself.
body{
margin: 0;
padding: 0;
}
.choose{
margin: 0;
padding: 0;
position: relative;
top: 0px;
display: block;
background: #262626;
height: 209px;
}
.choose input{
-webkit-appearance: none;
}
.choose #female{
position: absolute;
left: 65%;
}
.choose #male, #female{
position: absolute;
top: 50%;
left: 35%;
transform: translate(-50%,-50%);
background: #ffffff;
width: 70px;
height: 70px;
text-align: center;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: .5s;
font-size: 24px;
color: #262626;
}
.choose #male:hover{
background: #3c81de;
color: white;
}
.choose #female:hover{
background: #f23895;
color: white;
}
.choose #male .fas{
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #female .fas{
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #male .fas:hover{
animation: manimate 7s;
}
#keyframes manimate{
0%{
box-shadow: 0 0 0 0 rgb(90, 168, 217)
}
12%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
80%{
box-shadow: 0 0 0 0px rgba(255,109,74,0)
}
100%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
}
.choose #female .fas:hover{
animation: fanimate 7s;
}
input[type="radio"]:checked{
animation: fanimate 7s;
}
#keyframes fanimate{
0%{
box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
}
12%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
80%{
box-shadow: 0 0 0 0px rgba(255,109,74,0)
}
100%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
}
<!DOCTYPE html>
<html>
<head>
<title>mvrikxix's Arena</title>
<link rel="stylesheet" href="PlaywithButtons.css">
<link rel="icon" href="mvrikxix.png">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>
<body>
<div class="choose">
<label>
<input type="radio"><span id="male")><i class="fas fa-mars"></i></span></input>
<input type="radio"><span id="female"><i class="fas fa-venus"></i></span></input>
</label>
</div>
</body>
</html>

In order to use :checked, you'll need to stay aware of the HTML structure.
For example, it seems that you want to style the <span> elements directly following <input> elements. The adjacent sibling or general sibling combinator can be useful for that.
I've also wrapped each input in its own label to keep them independent.
body {
margin: 0;
padding: 0;
}
.choose {
background: #262626;
display: flex;
justify-content: space-around;
padding: 5% 0;
}
.choose input {
display: none;
}
#male span,
#female span {
display: block;
background: #ffffff;
width: 70px;
height: 70px;
text-align: center;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: .5s;
font-size: 24px;
color: #262626;
}
#male input:checked+span {
background: #3c81de;
color: white;
}
#female input:checked+span {
background: #f23895;
color: white;
}
.choose .fas {
display: block;
line-height: 70px;
border-radius: 50%;
}
#male input:checked+span .fas {
animation: manimate 7s;
}
#keyframes manimate {
0% {
box-shadow: 0 0 0 0 rgb(90, 168, 217)
}
12% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
80% {
box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
}
100% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
}
#female input:checked+span .fas {
animation: fanimate 7s;
}
#keyframes fanimate {
0% {
box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
}
12% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
80% {
box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
}
100% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<div class="choose">
<label id="male">
<input name="gender" type="radio">
<span><i class="fas fa-mars"></i></span>
</label>
<label id="female">
<input name="gender" type="radio">
<span><i class="fas fa-venus"></i></span>
</label>
</div>

Inserting a link

How can I turn the facebook font awesome icon into a link? Whenever I insert a link it pushes the icon out of the frame of the picture. I would like to put other social media icons beside the facebook icon aswell but at the moment I am just trying to solve the problem of getting the icon to link to facebook.
CSS
.polaroid-images a {
background: white;
display: inline;
float: left;
margin: 0 15px 70px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index: 0;
position: relative;
}
.polaroid-images a,
:after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top: 15px;
}
.polaroid-images img {
display: block;
width: inherit;
}
.polaroid-images a,
i:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images a:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index: 10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
}
.polaroid-images i {
position: relative;
font-size: 1em;
top: 15px;
margin-right: .5em;
color: #3b5998;
}
HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet"/>
<div class="polaroid-images">
<a href="" title="Alex"><img height="200"
src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Island"
title="Alex" class=fishes /><i class="fa fa-facebook fa-3x"></i></a>
</div>

So, as of right now you have a link that is wrapping your entire card. You should probably remove this unless you want the whole card to link to Facebook. Here's what I would do:
.polaroid-images div {
background: white;
display: inline;
float: left;
margin: 0 15px 70px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index: 0;
position: relative;
}
.polaroid-images div,
:after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top: 15px;
}
.polaroid-images img {
display: block;
width: inherit;
}
.polaroid-images div,
i:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images div:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index: 10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
}
.polaroid-images i {
position: relative;
font-size: 1em;
top: 15px;
margin-right: .5em;
color: #3b5998;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet"/>
<div class="polaroid-images">
<div title="Alex">
<img height="200"
src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Island"
title="Alex" class=fishes />
<i class="fa fa-facebook fa-3x"></i>
</div>
</div>
Essentially, I just removed the a tag from the entire block and only wrapped it around four FB icon. Then I changed your container to a div and changed the style accordingly.
Hope this helps!

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Align label contents after checkbox css - html

For the label, use padding instead of text-indent: .toggle-button--tuli label { line-height: 20px; padding-left: 30px; } It will add padding left for the text and the button will be aligned to the left side because it is positioned absolutely.

Related

how do I reposition a styled label to a corner of its div?

why is this html and css rendering differently on my webpage?

Display tooltip on hover in cutom toggle switch

How to make the animation play when the radio button is checked?

Inserting a link

Categories

Resources