Jump to content

Gnapponico

Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by Gnapponico

    Custom Checkbox & Radio without labels

    in CSS

    Posted · Edited by Gnapponico

    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!

    Custom Checkbox & Radio without labels

    in CSS

    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

    Introduce Yourself

    in General

    Posted

    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...