Changing toggle-button style
1
I want to change the style of the toggle-button like this.
This is my sample code:
<div class="form-group has-feedback">
<input id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Id" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Id" type="hidden" value="{D7AB5D2E-444F-49C7-91E4-564496D7C8A2}">
<div>
<input data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;">
<span class="button-checkbox bootstrap-checkbox">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display:none;"></span>
<span class="icon fa fa-check-square"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button>
</span>
<label class="switch">
<input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="false">
<span class="slider round"></span>
</label>
</div>
<span class="field-validation-valid help-block" data-valmsg-for="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" data-valmsg-replace="true"></span>
</div>
Jsfiddle example
I tried few CSS but it is not exactly what I want. I tried:
.switchbtn:before {
position: absolute;
content: "";
height: 32px;
width: 26px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
css css3 sass css-selectors html5-canvas
asked Nov 26 '18 at 1:14
Owais AhmedOwais Ahmed
5571530
add a comment |
1
I want to change the style of the toggle-button like this.
This is my sample code:
<div class="form-group has-feedback">
<input id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Id" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Id" type="hidden" value="{D7AB5D2E-444F-49C7-91E4-564496D7C8A2}">
<div>
<input data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;">
<span class="button-checkbox bootstrap-checkbox">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display:none;"></span>
<span class="icon fa fa-check-square"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button>
</span>
<label class="switch">
<input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="false">
<span class="slider round"></span>
</label>
</div>
<span class="field-validation-valid help-block" data-valmsg-for="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" data-valmsg-replace="true"></span>
</div>
Jsfiddle example
I tried few CSS but it is not exactly what I want. I tried:
.switchbtn:before {
position: absolute;
content: "";
height: 32px;
width: 26px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
css css3 sass css-selectors html5-canvas
asked Nov 26 '18 at 1:14
Owais AhmedOwais Ahmed
5571530
Anybody else click the toggles? LOL.
– IamBatman
Nov 28 '18 at 15:55
add a comment |
1
1
1
I want to change the style of the toggle-button like this.
This is my sample code:
<div class="form-group has-feedback">
<input id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Id" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Id" type="hidden" value="{D7AB5D2E-444F-49C7-91E4-564496D7C8A2}">
<div>
<input data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;">
<span class="button-checkbox bootstrap-checkbox">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display:none;"></span>
<span class="icon fa fa-check-square"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button>
</span>
<label class="switch">
<input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="false">
<span class="slider round"></span>
</label>
</div>
<span class="field-validation-valid help-block" data-valmsg-for="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" data-valmsg-replace="true"></span>
</div>
Jsfiddle example
I tried few CSS but it is not exactly what I want. I tried:
.switchbtn:before {
position: absolute;
content: "";
height: 32px;
width: 26px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
css css3 sass css-selectors html5-canvas
asked Nov 26 '18 at 1:14
Owais AhmedOwais Ahmed
5571530
I want to change the style of the toggle-button like this.
This is my sample code:
<div class="form-group has-feedback">
<input id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Id" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Id" type="hidden" value="{D7AB5D2E-444F-49C7-91E4-564496D7C8A2}">
<div>
<input data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;">
<span class="button-checkbox bootstrap-checkbox">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display:none;"></span>
<span class="icon fa fa-check-square"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button>
</span>
<label class="switch">
<input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="false">
<span class="slider round"></span>
</label>
</div>
<span class="field-validation-valid help-block" data-valmsg-for="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" data-valmsg-replace="true"></span>
</div>
Jsfiddle example
I tried few CSS but it is not exactly what I want. I tried:
.switchbtn:before {
position: absolute;
content: "";
height: 32px;
width: 26px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
css css3 sass css-selectors html5-canvas
css css3 sass css-selectors html5-canvas
asked Nov 26 '18 at 1:14
Owais AhmedOwais Ahmed
5571530
asked Nov 26 '18 at 1:14
Owais AhmedOwais Ahmed
5571530
asked Nov 26 '18 at 1:14
Owais AhmedOwais Ahmed
5571530
asked Nov 26 '18 at 1:14
Owais AhmedOwais Ahmed
5571530
asked Nov 26 '18 at 1:14
Owais AhmedOwais Ahmed
5571530
5571530
Anybody else click the toggles? LOL.
– IamBatman
Nov 28 '18 at 15:55
add a comment |
Anybody else click the toggles? LOL.
– IamBatman
Nov 28 '18 at 15:55
Anybody else click the toggles? LOL.
– IamBatman
Nov 28 '18 at 15:55
Anybody else click the toggles? LOL.
– IamBatman
Nov 28 '18 at 15:55
add a comment |
1 Answer
1
active
oldest
votes
4
You are on the right track. You can use the :before and :after pseudo CSS selectors to modify the look and feel of the toggle button. Since :before is already used to create the circular toggle, I have used :after to add the text. Obviously, there are more ways to do this, and the below is a just a quick way to show you how to achieve this.
Note that you will have to modify the pseudo selectors for both the states (normal and checked) as you want different colors.
Check the code snippet below and use that as a starting point to modify/tweak styles as per your need.
Hope this helps.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switchbtn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border: 2px solid #bbb;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:before {
position: absolute;
content: "";
height: 34px;
width: 34px;
left: -2px;
top: -2px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:after {
position: absolute;
content: "OFF";
right: 3px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.switchbtn {
background-color: white;
border: 2px solid #2196F3;
}
input:focus+.switchbtn {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.switchbtn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color: #2196F3;
}
input:checked+.switchbtn:after {
position: absolute;
content: "ON";
left: 7px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
/* Rounded sliders */
.switchbtn {
border-radius: 34px;
}
.switchbtn:before {
border-radius: 50%;
}
.switch button {
display: none;
}<label class="switch">
<input class="switchbtn" data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;" aria-invalid="false" aria-describedby="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error">
<span class="button-checkbox bootstrap-checkbox switchbtn">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display: none;"></span>
<span class="icon fa fa-check-square" style="display: inline;"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button></span><input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="hidden" value="false">
</label>Hope this helps.
answered Nov 26 '18 at 1:39
Gurtej SinghGurtej Singh
2,6161624
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473630%2fchanging-toggle-button-style%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
You are on the right track. You can use the :before and :after pseudo CSS selectors to modify the look and feel of the toggle button. Since :before is already used to create the circular toggle, I have used :after to add the text. Obviously, there are more ways to do this, and the below is a just a quick way to show you how to achieve this.
Note that you will have to modify the pseudo selectors for both the states (normal and checked) as you want different colors.
Check the code snippet below and use that as a starting point to modify/tweak styles as per your need.
Hope this helps.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switchbtn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border: 2px solid #bbb;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:before {
position: absolute;
content: "";
height: 34px;
width: 34px;
left: -2px;
top: -2px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:after {
position: absolute;
content: "OFF";
right: 3px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.switchbtn {
background-color: white;
border: 2px solid #2196F3;
}
input:focus+.switchbtn {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.switchbtn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color: #2196F3;
}
input:checked+.switchbtn:after {
position: absolute;
content: "ON";
left: 7px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
/* Rounded sliders */
.switchbtn {
border-radius: 34px;
}
.switchbtn:before {
border-radius: 50%;
}
.switch button {
display: none;
}<label class="switch">
<input class="switchbtn" data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;" aria-invalid="false" aria-describedby="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error">
<span class="button-checkbox bootstrap-checkbox switchbtn">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display: none;"></span>
<span class="icon fa fa-check-square" style="display: inline;"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button></span><input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="hidden" value="false">
</label>Hope this helps.
answered Nov 26 '18 at 1:39
Gurtej SinghGurtej Singh
2,6161624
add a comment |
4
You are on the right track. You can use the :before and :after pseudo CSS selectors to modify the look and feel of the toggle button. Since :before is already used to create the circular toggle, I have used :after to add the text. Obviously, there are more ways to do this, and the below is a just a quick way to show you how to achieve this.
Note that you will have to modify the pseudo selectors for both the states (normal and checked) as you want different colors.
Check the code snippet below and use that as a starting point to modify/tweak styles as per your need.
Hope this helps.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switchbtn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border: 2px solid #bbb;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:before {
position: absolute;
content: "";
height: 34px;
width: 34px;
left: -2px;
top: -2px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:after {
position: absolute;
content: "OFF";
right: 3px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.switchbtn {
background-color: white;
border: 2px solid #2196F3;
}
input:focus+.switchbtn {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.switchbtn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color: #2196F3;
}
input:checked+.switchbtn:after {
position: absolute;
content: "ON";
left: 7px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
/* Rounded sliders */
.switchbtn {
border-radius: 34px;
}
.switchbtn:before {
border-radius: 50%;
}
.switch button {
display: none;
}<label class="switch">
<input class="switchbtn" data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;" aria-invalid="false" aria-describedby="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error">
<span class="button-checkbox bootstrap-checkbox switchbtn">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display: none;"></span>
<span class="icon fa fa-check-square" style="display: inline;"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button></span><input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="hidden" value="false">
</label>Hope this helps.
answered Nov 26 '18 at 1:39
Gurtej SinghGurtej Singh
2,6161624
add a comment |
4
4
4
You are on the right track. You can use the :before and :after pseudo CSS selectors to modify the look and feel of the toggle button. Since :before is already used to create the circular toggle, I have used :after to add the text. Obviously, there are more ways to do this, and the below is a just a quick way to show you how to achieve this.
Note that you will have to modify the pseudo selectors for both the states (normal and checked) as you want different colors.
Check the code snippet below and use that as a starting point to modify/tweak styles as per your need.
Hope this helps.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switchbtn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border: 2px solid #bbb;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:before {
position: absolute;
content: "";
height: 34px;
width: 34px;
left: -2px;
top: -2px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:after {
position: absolute;
content: "OFF";
right: 3px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.switchbtn {
background-color: white;
border: 2px solid #2196F3;
}
input:focus+.switchbtn {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.switchbtn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color: #2196F3;
}
input:checked+.switchbtn:after {
position: absolute;
content: "ON";
left: 7px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
/* Rounded sliders */
.switchbtn {
border-radius: 34px;
}
.switchbtn:before {
border-radius: 50%;
}
.switch button {
display: none;
}<label class="switch">
<input class="switchbtn" data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;" aria-invalid="false" aria-describedby="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error">
<span class="button-checkbox bootstrap-checkbox switchbtn">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display: none;"></span>
<span class="icon fa fa-check-square" style="display: inline;"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button></span><input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="hidden" value="false">
</label>Hope this helps.
answered Nov 26 '18 at 1:39
Gurtej SinghGurtej Singh
2,6161624
You are on the right track. You can use the :before and :after pseudo CSS selectors to modify the look and feel of the toggle button. Since :before is already used to create the circular toggle, I have used :after to add the text. Obviously, there are more ways to do this, and the below is a just a quick way to show you how to achieve this.
Note that you will have to modify the pseudo selectors for both the states (normal and checked) as you want different colors.
Check the code snippet below and use that as a starting point to modify/tweak styles as per your need.
Hope this helps.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switchbtn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border: 2px solid #bbb;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:before {
position: absolute;
content: "";
height: 34px;
width: 34px;
left: -2px;
top: -2px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:after {
position: absolute;
content: "OFF";
right: 3px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.switchbtn {
background-color: white;
border: 2px solid #2196F3;
}
input:focus+.switchbtn {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.switchbtn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color: #2196F3;
}
input:checked+.switchbtn:after {
position: absolute;
content: "ON";
left: 7px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
/* Rounded sliders */
.switchbtn {
border-radius: 34px;
}
.switchbtn:before {
border-radius: 50%;
}
.switch button {
display: none;
}<label class="switch">
<input class="switchbtn" data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;" aria-invalid="false" aria-describedby="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error">
<span class="button-checkbox bootstrap-checkbox switchbtn">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display: none;"></span>
<span class="icon fa fa-check-square" style="display: inline;"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button></span><input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="hidden" value="false">
</label>Hope this helps.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switchbtn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border: 2px solid #bbb;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:before {
position: absolute;
content: "";
height: 34px;
width: 34px;
left: -2px;
top: -2px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:after {
position: absolute;
content: "OFF";
right: 3px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.switchbtn {
background-color: white;
border: 2px solid #2196F3;
}
input:focus+.switchbtn {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.switchbtn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color: #2196F3;
}
input:checked+.switchbtn:after {
position: absolute;
content: "ON";
left: 7px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
/* Rounded sliders */
.switchbtn {
border-radius: 34px;
}
.switchbtn:before {
border-radius: 50%;
}
.switch button {
display: none;
}<label class="switch">
<input class="switchbtn" data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;" aria-invalid="false" aria-describedby="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error">
<span class="button-checkbox bootstrap-checkbox switchbtn">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display: none;"></span>
<span class="icon fa fa-check-square" style="display: inline;"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button></span><input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="hidden" value="false">
</label> .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switchbtn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border: 2px solid #bbb;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:before {
position: absolute;
content: "";
height: 34px;
width: 34px;
left: -2px;
top: -2px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:after {
position: absolute;
content: "OFF";
right: 3px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.switchbtn {
background-color: white;
border: 2px solid #2196F3;
}
input:focus+.switchbtn {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.switchbtn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color: #2196F3;
}
input:checked+.switchbtn:after {
position: absolute;
content: "ON";
left: 7px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
/* Rounded sliders */
.switchbtn {
border-radius: 34px;
}
.switchbtn:before {
border-radius: 50%;
}
.switch button {
display: none;
}<label class="switch">
<input class="switchbtn" data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;" aria-invalid="false" aria-describedby="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value-error">
<span class="button-checkbox bootstrap-checkbox switchbtn">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display: none;"></span>
<span class="icon fa fa-check-square" style="display: inline;"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button></span><input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="hidden" value="false">
</label>answered Nov 26 '18 at 1:39
Gurtej SinghGurtej Singh
2,6161624
answered Nov 26 '18 at 1:39
Gurtej SinghGurtej Singh
2,6161624
answered Nov 26 '18 at 1:39
Gurtej SinghGurtej Singh
2,6161624
answered Nov 26 '18 at 1:39
Gurtej SinghGurtej Singh
2,6161624
2,6161624
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473630%2fchanging-toggle-button-style%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Anybody else click the toggles? LOL.
– IamBatman
Nov 28 '18 at 15:55