Style radiobutton without using JS or CSS3 or HTML5

Question

I was tasked to create following radiobutton without using JS or CSS3 or HTML5. Is it possible somehow?

enter image description here

Please check this website (You need CSS at least) - code.stephenmorley.org/html-and-css/… — Luís P. A.
– Luís P. A., Commented Mar 16, 2015 at 15:19
I've already checked it and all those methods use CSS3. I'm limited to CSS2.1. — user3414980
– user3414980, Commented Mar 16, 2015 at 15:23
Have you tried this - stackoverflow.com/questions/5702075/… — Luís P. A.
– Luís P. A., Commented Mar 16, 2015 at 15:33
Please move an image into the question instead of relying on the link. — Peter DeWeese
– Peter DeWeese, Commented Mar 16, 2015 at 15:38
This was hilariously hard to do. Probably impossible without Javascript being used in place of CSS3. Anyway, see if this works for you: codepen.io/JaxoDI/pen/VYVbOB — Scott
– Scott, Commented Mar 16, 2015 at 15:41

Luís P. A. · Accepted Answer · 2015-03-16 15:55:24Z

1

Ok... try this:

CSS

input[type=checkbox]{
    opacity:0;
    height: 40px;
    width: 40px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

input[type=checkbox] + label
   {
       background: url("http://www.csscheckbox.com/checkboxes/u/csscheckbox_796472012f96c8785e1ab96779a4ee3c.png") no-repeat 0 0px;
       height: 40px;
       width: 40px;
       display:block;
       padding: 0px;
   }

input[type=checkbox]:checked + label
   {
       background: url("http://www.csscheckbox.com/checkboxes/u/csscheckbox_796472012f96c8785e1ab96779a4ee3c.png") no-repeat 0 -40px;

   }

HTML

<input type="checkbox" value="1" /><label></label>

DEMO HERE

answered Mar 16, 2015 at 15:55

Luís P. A.

9,7392 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oriol Over a year ago

:checked was introduced by HTML5 and Selectors Level 3.

Collectives™ on Stack Overflow

Style radiobutton without using JS or CSS3 or HTML5

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related