-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Gnapponico
-
-
yes...better...
but...what did you change? only the order of this?
input[type='checkbox']:active:checked + span { background-position: -16px -48px; }
-
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:
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!
-
Wooow...It seems to work great!
But...only for checkbox...
I tried for radiobutton and...it doesn't work
I'll spend some days in "extra coding" my C# code...
thank you sooooooomuch!
-
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):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 -
Hi guys!I'm Nick, from Italy, and I 'm a Research assistant at the University of Turin (medical field, even there are many things is in common with web!).I'm interested in webdesign and programming. I grow up with PHP and C++, then I created my first websites. Now I'm moving my attention on webapps (C# and asp.net).I've been using w3schools site to learn about CSS and other things. Now, there are many other things I've to ask 'coz I've to admit I've reached a good degree of knowledge, but I've many things to improve and learn: this is the reason why I decided to sign up for the forum!So let's start this new adventure!Hope you can help me and teach me something new
Custom Checkbox & Radio without labels
in CSS
Posted
ooook... now I understand... Thank You!