Jump to content

Custom Checkbox & Radio without labels

Gnapponico

By Gnapponico
in CSS

 Share

Recommended Posts

Gnapponico Newbie

Gnapponico

Posted
Posted
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 comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

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 comment
Share on other sites
Gnapponico Newbie

Gnapponico

Posted
  • Author
Posted (edited)

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
Link to comment
Share on other sites
Gnapponico Newbie

Gnapponico

Posted
  • Author
Posted (edited)

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 comment
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
 Share
Go to topic listing
×
×
  • Create New...