Comments (9)
Sure. You can take a look at the ios
and android
themes on the main demo page, to see how it works for the light/checkbox switch
:
https://ghinda.net/css-toggle-switch/
For the switch/radio switch
you could use the nth-child
selector to target an individual label
, and create a pseudo-element for it that fills up the entire background. This way you could have a different background for each selected item.
from css-toggle-switch.
I'd like to do that too but my css skills aren't up to it. Any chance you could publish an example?
from css-toggle-switch.
Sure, here's a demo:
http://s.siloz.io/G
from css-toggle-switch.
from css-toggle-switch.
If you use Sass and Bootstrap 4, you can get the colors from their variables file:
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L46
from css-toggle-switch.
from css-toggle-switch.
on't seem to be able to get this working. I'm using it on a switch-light not a swith-toggle, not sure if that makes any difference. Here's the html.
<label class="switch-light" onclick=""> <input name="Publish" type="checkbox" {{Published}}> <span class="alert alert-light"> <span>No</span> <span>Yes</span> <a class="btn btn-success disabled"></a> </span> </label>
and the css:
`input:checked:nth-of-type(1) ~ a {
background: red;
}
input:checked:nth-of-type(2) ~ a {
background: green;
}`
Both parts of the switch appear in the btn-success color. I also tried it without the class statement in the a tag and no colors were displayed.
from css-toggle-switch.
That will only work for the radio switch.
Try this for the checkbox switch: http://s.siloz.io/H
from css-toggle-switch.
from css-toggle-switch.
Related Issues (20)
- Active styles incorrects HOT 6
- Is this library maintained? HOT 5
- Button Click with Mouse initiates a onclick, but the State (both Visual and Value) does not change HOT 6
- Remove label text margin on "Light switch" or move it on top HOT 2
- "Material design" theme HOT 3
- Restore Focus Outline HOT 3
- Bug when viewed in Firefox HOT 1
- How to stop toggle based on window.confirm() HOT 1
- Screen reader announces "off on" in label HOT 3
- jsDelivr install option not working HOT 1
- Is there a way to reverse switch buttons? HOT 2
- How to extend to more than 6 HOT 2
- Label with Div's height HOT 4
- Toggle Spacing HOT 1
- Please show focus indicators HOT 1
- Request for already minified file in distro HOT 8
- Browser default focus style overrides HOT 3
- Microsoft Edge support HOT 6
- Set width 100% if just one option available HOT 1
- Multiple toggle switches on a page interact with each other HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-toggle-switch.