Jump to content


  • Posts

  • Joined

  • Last visited

About Gnapponico

  • Birthday 09/17/1982

Profile Information

  • Location

Gnapponico's Achievements


Newbie (1/7)



  1. ooook... now I understand... Thank You!
  2. yes...better... but...what did you change? only the order of this? input[type='checkbox']:active:checked + span { background-position: -16px -48px; }
  3. 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!
  4. 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!
  5. 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: http://jsfiddle.net/Kztwn/5/ 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
  6. 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
  • Create New...