how can I make a custom checkbox with css only (no JS no JQ) with content:"on" when checked and content:"off" when uncheked.
Thanks.
reedit
OK, after LOT of copy/paste/delete, it work now.
Thank.
5
-
What about HTML, can you use HTML?Musa– Musa2012-11-20 02:01:10 +00:00Commented Nov 20, 2012 at 2:01
-
You mean like giving it a style and changing the background property? Or am i missing somethingintelis– intelis2012-11-20 02:01:16 +00:00Commented Nov 20, 2012 at 2:01
-
CSS affects style, attributes are not style, even though CSS can work off of attributes (on modern browsers) so I doubt you can do it without JS.greener– greener2012-11-20 02:01:29 +00:00Commented Nov 20, 2012 at 2:01
-
@Musa of course, I know HTML, lol, I appologize for not giving clear details.JustTrying– JustTrying2012-11-20 03:00:31 +00:00Commented Nov 20, 2012 at 3:00
-
@user1141356 yeah exactly, something like that.JustTrying– JustTrying2012-11-20 03:01:57 +00:00Commented Nov 20, 2012 at 3:01
Add a comment
|
4 Answers
input[type=checkbox] {
position: relative;
visibility: hidden;
cursor: pointer;
}
input[type=checkbox]:after {
display: block;
content: "OFF";
position: absolute;
top: 0;
right: -30px;
visibility: visible;
height: 30px;
line-height: 30px;
width: 50px;
text-align: center;
border-radius: 4px;
background: #d00;
color: #fff;
font-weight: 600;
cursor: pointer;
}
input[type=checkbox]:checked:after {
content: "ON";
background: #0a0;
}<input type="checkbox" />
3 Comments
wakooka
I like this very much, nice one :)
JustTrying
E X A C T E L Y, what I was looking for, though like the one I linked above, it isn't compatible with Firefox (am using Firefox 14)
Daniel Gasser
Looks great! Any suggestions to make it work on Edge?
It is possible. Check out these blog posts by Ryan Seddon. He explain how you can play with checkbox and CSS
http://www.thecssninja.com/css/custom-inputs-using-css
Comments
Creating an actual element with CSS isn't possible. You can however style a checkbox using css.
An example:
input[type=checkbox] {
outline: 2px solid #f00;
}
Relying on pure CSS is also a give-or-take when dealing with different browsers and platforms. I hope this answers your question.
Comments
I believe this is impossible with just css. Css decorates a html element and does not change its properties. If you click the checkbox, the box will have to do a postback to show it on the page. In which case the css will be the same. You need javascript.
What makes you not want to use javascript?
1 Comment
JustTrying
lol, Well, to be sincere, am afraid of JS though am learning it right actually.... and if ever you van add some JS stuff to make what Zoltan Toth posted above works on Firefox at least, I'll take it for sure :)