Jump to content
Gnapponico

Custom Checkbox & Radio without labels

Recommended Posts

Hi! I'm new to W3C School forum, even if I read meny things about CSS in the main website.
I'm trying to customize checkbox and radio inputs...
I read many tutorials concerning input customization and I successfully customized buttons, password, text, etc and select, textbox, etc...
My problem is the compatibility with browsers. I'm trying to develop a web-app (asp.net) in which I customized everything.
Checkbox and Radio buttons are my "bête noire": I can't make them run on FireFox and iExplorer.
I choose the "sprite" method, avoiding the use of labels, because my web-app can't use labels.
So, this is the CSS code I'm currently using:
input[type='checkbox'], input[type='radio']{         background-image: url('http://s28.postimg.org/oggskkn6x/controls.png');    background-repeat: no-repeat;   width: 16px;   height: 16px;   margin: 0;   padding: 0;   -moz-appearance: none; /* not working */   -webkit-appearance: none;   -ms-appearance: none; /*not working */   -o-appearance: none;   appearance: none;}/* not checked */input[type='radio']{background-position: -32px 0; }/* checked */input[type='radio']:checked { background-position: -48px 0;}input[type='checkbox']:checked { background-position: -16px 0; }input[type='checkbox']:hover:checked, input[type='checkbox']:focus:checked { background-position: -16px -16px; }input[type='radio']:hover:checked,input[type='radio']:focus:checked { background-position: -48px -16px; }/* focus */input[type='checkbox']:hover,input[type='checkbox']:focus { background-position: 0 -16px; }input[type='radio']:hover,input[type='radio']:focus { background-position: -32px -16px; }/* active */input[type='checkbox']:active { background-position: 0 -48px; }input[type='radio']:active { background-position: -32px -48px; }input[type='checkbox']:active:checked { background-position: -16px -48px; }input[type='radio']:active:checked { background-position: -48px -48px; }/* disabled */input[type='checkbox']:disabled { background-position: 0 -32px; }input[type='radio']:disabled { background-position: -32px -32px; }input[type='checkbox']:disabled:checked { background-position: -16px -32px; }input[type='radio']:disabled:checked{ background-position: -48px -32px; }input[type='checkbox']:hover:disabled,input[type='checkbox']:focus:disabled { background-position: 0 -32px; }input[type='radio']:hover:disabled ,input[type='radio']:focus:disabled { background-position: -32px -32px; }input[type='checkbox']:hover:disabled:checked ,input[type='checkbox']:focus:disabled:checked { background-position: -16px -32px; }input[type='radio']:hover:disabled:checked,input[type='radio']:focus:disabled:checked { background-position: -48px -32px; }
Here, a JSFiddle in order to have a look on how it works:
If you open it on Opera, Safari or Chrome everything works great (as expected) but, if you use iExplorer (v. 10/11) or Firefox...not!
How can I make it work on Firefox, without lables and java?
Just to summarize, this is the result I obtain on iExplorer (IE), FireFox (FF), Opera (O), Chrome ( C), and Safari (S):
checkbox.png
I can accept IE isn't working, but FireFox...how can I hide the default input style?
Any ideas? Can anyone help me in finding the right solution?
Thanks in advance!
Nick

Share this post


Link to post
Share on other sites

What if you create a holding container around checkbox, add checkbox and a container to hold background image, and make checkbox opacity to 0 and make sure it is above background image container

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            input[type='checkbox'], input[type='radio']{                background-image: url('http://s28.postimg.org/oggskkn6x/controls.png');                background-repeat: no-repeat;                margin: 0;                padding: 0;                -moz-appearance: none; /* not working */                -webkit-appearance: none;                -ms-appearance: none; /*not working */                -o-appearance: none;                appearance: none;            }            .checkbox_outer {position:relative; float: left; margin-right: 5px;}            input[type='checkbox'] + span {position:absolute; top:0; left:0; right:0; bottom:0; background-image: url('http://s28.postimg.org/oggskkn6x/controls.png'); background-repeat: no-repeat;}            input[type='checkbox'] {background:none; opacity:0;}            input[type='checkbox'], input[type='radio'], .checkbox_outer {                height: 16px;                width: 16px;                position: relative;                z-index: 10;            }            /* not checked */            input[type='radio']{background-position: -32px 0; }            /* checked */            input[type='radio']:checked { background-position: -48px 0;}            input[type='checkbox']:checked { background-position: -16px 0; }            input[type='checkbox']:hover:checked,            input[type='checkbox']:focus:checked { background-position: -16px -16px; }            input[type='radio']:hover:checked,            input[type='radio']:focus:checked { background-position: -48px -16px; }            /* focus */            input[type='checkbox']:hover,            input[type='checkbox']:focus { background-position: 0 -16px; }            input[type='radio']:hover,            input[type='radio']:focus { background-position: -32px -16px; }            /* active */            input[type='checkbox']:active { background-position: 0 -48px; }            input[type='radio']:active { background-position: -32px -48px; }            input[type='checkbox']:active:checked { background-position: -16px -48px; }            input[type='radio']:active:checked { background-position: -48px -48px; }            /* disabled */            input[type='checkbox']:disabled { background-position: 0 -32px; }            input[type='radio']:disabled { background-position: -32px -32px; }            input[type='checkbox']:disabled:checked { background-position: -16px -32px; }            input[type='radio']:disabled:checked{ background-position: -48px -32px; }            input[type='checkbox']:hover:disabled,            input[type='checkbox']:focus:disabled { background-position: 0 -32px; }            input[type='radio']:hover:disabled ,            input[type='radio']:focus:disabled { background-position: -32px -32px; }            input[type='checkbox']:hover:disabled:checked ,            input[type='checkbox']:focus:disabled:checked { background-position: -16px -32px; }            input[type='radio']:hover:disabled:checked,            input[type='radio']:focus:disabled:checked { background-position: -48px -32px; }            input[type='checkbox']:checked + span{ background-position: -16px 0; }            input[type='checkbox']:hover:checked + span,            input[type='checkbox']:focus:checked { background-position: -16px -16px; }            input[type='checkbox']:hover + span,            input[type='checkbox']:focus + span { background-position: 0 -16px; }            input[type='checkbox']:active + span { background-position: 0 -48px; }            input[type='checkbox']:active:checked + span { background-position: -16px -48px; }            input[type='checkbox']:disabled + span{ background-position: 0 -32px; }            input[type='checkbox']:disabled:checked + span { background-position: -16px -32px; }            input[type='checkbox']:hover:disabled + span,            input[type='checkbox']:focus:disabled + span { background-position: 0 -32px; }            input[type='checkbox']:hover:disabled:checked + span ,            input[type='checkbox']:focus:disabled:checked + span { background-position: -16px -32px; }        </style>    </head>    <body>        <div class="checkbox_outer"><input id="ID1" type="checkbox" name="NAME1"><span></span></div> Empty, not checked & enabled<br />        <div class="checkbox_outer"><input id="ID2" type="checkbox" name="NAME2" checked="checked"><span></span></div>  Checked<br />        <div class="checkbox_outer"><input id="ID3" type="checkbox" name="NAME3" disabled="disabled"><span></span></div>  Empty, not checked & disabled<br />        <div class="checkbox_outer"> <input id="ID4" type="checkbox" name="NAME4" checked="checked" disabled="disabled"><span></span></div>  Checked & disabled<br /><br /><br />        <strong>Of course, it works well with radio input. It works only with Opera, Safari and Chrome</strong><br /><br />        <input id="ID5" type="radio" name="NAME5" checked> Checked<br />        <input id="ID5" type="radio" name="NAME5"> Not checked<br />        <input id="ID6" type="radio" name="NAME6" checked disabled> Checked & disabled<br />        <input id="ID6" type="radio" name="NAME6" disabled> Not checked & disabled<br />        <br />Here it's how it looks like on iEplorer (IE), Firefox (FF) and the others:<br />    <center><img src="http://s9.postimg.org/825sxesnj/checkbox.png" width="50%"></img></center></body></html>

It may mean extra html coding but it works in all browsers, I think.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Wooow...It seems to work great!

But...only for checkbox...

I tried for radiobutton and...it doesn't work :facepalm:

 

I'll spend some days in "extra coding" my C# code... :umnik2:

 

thank you sooooooomuch!

Edited by Gnapponico

Share this post


Link to post
Share on other sites

Ok...ok... It was my fault!

I forgot something...

 

this is the result:

 

CSS:

input[type='checkbox'], input[type='radio'] {background:none; opacity:0;}.checkbox_outer {position:relative; float: left; margin-right: 5px;}input[type='checkbox'] + span, input[type='radio'] + span {position:absolute; top:0; left:0; right:0; bottom:0; background-image: url('http://s28.postimg.org/oggskkn6x/controls.png'); background-repeat: no-repeat;}input[type='checkbox'], input[type='radio'], .checkbox_outer { height: 16px; width: 16px; position: relative; z-index: 10;}/*Checkbox*/input[type='checkbox']:checked + span{ background-position: -16px 0; }input[type='checkbox']:hover:checked + span,input[type='checkbox']:focus:checked { background-position: -16px -16px; }input[type='checkbox']:hover + span,input[type='checkbox']:focus + span { background-position: 0 -16px; }input[type='checkbox']:active + span { background-position: 0 -48px; }input[type='checkbox']:active:checked + span { background-position: -16px -48px; }input[type='checkbox']:disabled + span{ background-position: 0 -32px; }input[type='checkbox']:disabled:checked + span { background-position: -16px -32px; }input[type='checkbox']:hover:disabled + span,input[type='checkbox']:focus:disabled + span { background-position: 0 -32px; }input[type='checkbox']:hover:disabled:checked + span ,input[type='checkbox']:focus:disabled:checked + span { background-position: -16px -32px; }/*Radiobutton*/input[type='radio']+span {background-position: -32px 0; }input[type='radio']:checked + span{ background-position: -48px 0; }input[type='radio']:hover:checked + span,input[type='radio']:focus:checked { background-position: -48px -16px; }input[type='radio']:hover + span,input[type='radio']:focus + span { background-position: -32px -16px; }input[type='radio']:active + span { background-position: -32px -48px; }input[type='radio']:active:checked + span { background-position: -48px -48px; }input[type='radio']:disabled + span{ background-position: -32px -32px; }input[type='radio']:disabled:checked + span { background-position: -48px -32px; }input[type='radio']:hover:disabled + span,input[type='radio']:focus:disabled + span { background-position: -32px -32px; }input[type='radio']:hover:disabled:checked + span ,input[type='radio']:focus:disabled:checked + span { background-position: -48px -32px; } 

HTML:

<strong>Checkboxes</strong> <br />       <div class="checkbox_outer"><input id="ID1" type="checkbox" name="NAME1"><span></span></div> Empty, not checked & enabled<br /><div class="checkbox_outer"><input id="ID2" type="checkbox" name="NAME2" checked="checked"><span></span></div>  Checked<br /><div class="checkbox_outer"><input id="ID3" type="checkbox" name="NAME3" disabled="disabled"><span></span></div>  Empty, not checked & disabled<br /><div class="checkbox_outer"> <input id="ID4" type="checkbox" name="NAME4" checked="checked" disabled="disabled"><span></span></div>  Checked & disabled<br /><br /><br /><strong>Radio buttons </strong><br /><div class="checkbox_outer"> <input id="ID5" type="radio" name="NAME5" checked><span></span></div> Checked<br /><div class="checkbox_outer"> <input id="ID5" type="radio" name="NAME5"><span></span></div> Not checked<br /><div class="checkbox_outer"> <input id="ID6" type="radio" name="NAME6" checked disabled><span> </span></div>Checked & disabled<br /><div class="checkbox_outer"> <input id="ID6" type="radio" name="NAME6" disabled><span></span></div> Not checked & disabled<br />

the result here:

 

http://jsfiddle.net/vPe4y/1/

 

Now...some questions:

1) if input control is "disabled", the "focus" or "hover" action is disabled...why?

2) if I check something (i.e. I click con radiobutton or a checkbox) and I stand with the pointer on it or around without clicking anything at all, I can't see the result...I've to click outside the input area to see the result...why? Everything works great on Safari only... :|

 

Anyway...dsonesuk...You teached me something new! thanks!

Edited by Gnapponico

Share this post


Link to post
Share on other sites

:good: yes...better...

but...what did you change? only the order of this? :umnik2:

input[type='checkbox']:active:checked + span { background-position: -16px -48px; }
Edited by Gnapponico

Share this post


Link to post
Share on other sites

some of input selectors did not have span, and pseudo hover etc have to be in specific order

 

link

visted

hover

active

 

LoVe - HAte

 

active was taken precedence over hover.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×