I had tried this code for toggle switch circular, it works fine for android but it doesn't works fine for iOS.
Below is the reference of code which I have used to write the code below
Reference from where code is used
code:
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
.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: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: rgb(33, 159, 243);
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: white;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch" data-align="right">
<input type="checkbox" id="togBtn" value="false">
<span class="slider round"></span>
</label>
Related
I followed instructions of w3schools to create a html toggle switch and I want text to be on the left of it to explain what the slider does but it keeps being put on top of the slider or miss aligned.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
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);
}
<form class="options">
<div id="enabled">
<p>Enabled</p>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</form>
the text is in the p tag and the switch in the label.
I have tried removing display inline-block but it caused it to not look right.
Add display: flex; and align-items: center; to the #enabled div and maybe some margin for spacing.
More about Flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
What you can do is to put the display property of your <p> tag to inline-block and vertical-align to middle. Thus, with a bit of padding to your paragraph, you can center it with your switch button.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
p {
display: inline-block;
vertical-align: middle;
padding-top: 5px;
padding-right:5px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
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);
}
<form class="options">
<div id="enabled">
<p>Enabled</p>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</form>
I have created a custom toggle button with html input checkbox and with custom css which looks like this
As you can see the texts and toggle buttons are not aligned, I tried adding margin/padding/heights nothing worked.
Here is the html and corresponding css ->
<h5 style="display:inline" class="switch">Company</h5>
<label class="switch">
<input type="checkbox" id="company-survey-checker">
<span class="slider round"></span>
</label>
<h5 style="display:inline">Survey</h5>
And the css operating here is ->
<style>
.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%;
}
</style>
Ideally the texts and toggle buttons should be on the same line but i am finding it difficult to achieve it , any help is much appreciated
Add vertical-align:middle to your label
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
vertical-align: middle
}
.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%;
}
<h5 style="display:inline" class="switch">Company</h5>
<label class="switch">
<input type="checkbox" id="company-survey-checker">
<span class="slider round"></span>
</label>
<h5 style="display:inline">Survey</h5>
I was searching for a way to make some kind of toggle button and I found one that is exactly how I wanted but this example is using the toggle on an input field and I want to use it on a div. I tried several things changing the CSS classes but for some reason I can't get it working properly.
This is the example CSS I am using:
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.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;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(55px);
}
/*------ ADDED CSS ---------*/
.slider:after
{
content:'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked + .slider:after
{
content:'ON';
}
/*--------- END --------*/
This is the example HTML:
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>
When I use it like this everything is working fine but my HTML and the div I want to toggle is like this:
<div class="facetwp-facet facetwp-facet-aanbieding facetwp-type-checkboxes" data-name="aanbieding" data-type="checkboxes">
<div class="facetwp-checkbox" data-value="ja">Ja</div>
</div>
I made changes to the example CSS to make it work on the div I want to toggle but I'm a bit lost here on how to get this working.
Maybe it is very simple but I'm lost so if somebody could help me out a little bit that would be great!
I added checked class to slider div instead of :checked the input checkbox.
So some changes in CSS code.
.slider.checked{...} instead of input:checked + .slider {...}
.slider:focus{...} instead of input:focus + .slider {...}
.slider.checked:before {...} instead of input:checked + .slider:before {...}
Try the Demo in Jquery
Using Jquery for clicking the slider div to toggle class checked.
$(".slider").click(function(){
$(this).toggleClass("checked");
});
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
.slider.checked{
background-color: #2ab934;
}
.slider:focus{
box-shadow: 0 0 1px #2196F3;
}
.slider.checked:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(55px);
}
/*------ ADDED CSS ---------*/
.slider:after
{
content:'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
.slider.checked:after
{
content:'ON';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch">
<div class="slider round"></div>
</div>
Try the Demo in Javascript
Using Javascript for clicking the slider div to toggle class checked.
function sliding(obj){
obj.classList.toggle("checked");
}
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
.slider.checked{
background-color: #2ab934;
}
.slider:focus{
box-shadow: 0 0 1px #2196F3;
}
.slider.checked:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(55px);
}
/*------ ADDED CSS ---------*/
.slider:after
{
content:'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
.slider.checked:after
{
content:'ON';
}
<div class="switch">
<div onclick="sliding(this);" class="slider round"></div>
</div>
I am trying to place a toggle button in a <summary> element, using the toggle button here: https://www.w3schools.com/howto/howto_css_switch.asp
It works fine on Firefox, but on Chrome, clicking on the toggle button actually toggles the <details> element instead of the toggle button. If I use the rounded version instead, I can toggle the toggle button if I click on the corner of the toggle button (the region that is no longer colored grey/blue because of the rounding), but not if I click on the interior.
What can I do to make it work on Chrome? Which of the two behaviors is "correct"?
.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%;
}
<details>
<summary>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</summary>
</details>
I mean in my opinion it's not exactly good UX, but to keep it simple and semantic, just separate the ambiguity in the actionable elements and their respective events they require. Eg;
.switch-summary-container {
position: relative;
margin: 1rem;
}
.switch-summary-container aside {
position: absolute;
top: -.5rem;
left: 1rem;
}
summary {
min-height: 40px;
}
.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%;
}
<section class="switch-summary-container">
<aside>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</aside>
<details>
<summary>
</summary>
Words Words Words.
</details>
</section>
I have a label and a text. How can I align them side by side horizontally?
Currently is text is aligned at the bottom of label (as in the image). I would like to align text to the center of the label.
My html code is
<div>
<label class="switchnmn">
<input type="checkbox" checked>
<div class="slidernmn round"></div>
</label>
<b style="font-size:15px">I am able to accept customer's any request date.</b>
</dlv>
My css file is
.switchnmn {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switchnmn input {display:none;}
.slidernmn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slidernmn:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slidernmn {
background-color: #2196F3;
}
input:focus + .slidernmn {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slidernmn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slidernmn.round {
border-radius: 34px;
}
.slidernmn.round:before {
border-radius: 50%;
}
Where should I change that?
You can add vertical-align: middle on label and b element.
.switchnmn {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switchnmn input {display:none;}
.slidernmn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slidernmn:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slidernmn {
background-color: #2196F3;
}
input:focus + .slidernmn {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slidernmn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slidernmn.round {
border-radius: 34px;
}
.slidernmn.round:before {
border-radius: 50%;
}
label, b {
vertical-align: middle;
}
<div>
<label class="switchnmn">
<input type="checkbox" checked>
<div class="slidernmn round"></div>
</label>
<b style="font-size:15px">I am able to accept customer's any request date.</b>
</div>
Define all three elements as display: inline-block; and vertical-align: middle; as shown below:
.x > * {
display: inline-block;
vertical-align: middle;
}
.switchnmn {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switchnmn input {
display: none;
}
.slidernmn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slidernmn:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slidernmn {
background-color: #2196F3;
}
input:focus+.slidernmn {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slidernmn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slidernmn.round {
border-radius: 34px;
}
.slidernmn.round:before {
border-radius: 50%;
}
<div class="x">
<label for="y" class="switchnmn">
<input type="checkbox" id="y" checked>
<div class="slidernmn round"></div>
</label>
<b style="font-size:15px">I am able to accept customer's any request date.</b>
</dlv>