Jump to content

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
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
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
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...