0

Is there a way to only by using css change the appearance of radio buttons. But, simple input radio, not with the labels css adjustment.

Like, here is my code: FIDDLE

<input type="radio" name="radio1" class="radiostyle" value="1">
<input type="radio" name="radio1" class="radiostyle" value="2">
<input type="radio" name="radio1" class="radiostyle" value="3">

Then, here is my css:

input[type=radio] {  
    display: none;  
}  

.radiostyle {
    display:inline-block;
    width:19px;
    height:19px;
    background-color: blue;
    /*or instead of color use some image*/
}

Therefore, is there I way how to easy do it. Because, I would like to put images instead of simple radio buttons.

user3392725
  • 65
  • 2
  • 9
  • Not much, if anything, you can do to a single element (even using :before or :after) once you set the display to none. – j08691 Apr 15 '14 at 19:31
  • 1
    What is wrong with using ` – Dryden Long Apr 15 '14 at 19:31

1 Answers1

1

With the experimental pointer-events property, it is possible. Although, I highly recommend the (proper) use of labels to increase accessibility for your website. Labels would also allow for a wider range of browser compatibility. Also, since it's an experimental property, I'm not sure of its future existence or support.

JSFiddle

List of support for pointer-events

CSS Code:

input[type=radio]:before {
    display: block;
    width: 19px;
    height: 19px;
    content: '';
    position: absolute;
    background-image: url(http://placekitten.com/19/19);
    pointer-events: none;
}

input[type=radio]:checked:before {
    background-image: url(http://placekitten.com/25/25);
}

.radiostyle {
    display:inline-block;
    width:19px;
    height:19px;
    background-color: blue;
    /*or instead of color use some image*/
}
jsea
  • 3,859
  • 1
  • 17
  • 21
  • Did it work for you? I thought there's no way to use `before` or `after` on non-containers — see [this](http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field). – certainlyakey Mar 01 '15 at 09:24
  • Yep. The JSFiddle seemed to not work because the website I was using for the images seems to be broken. I've updated the JSFiddle with an alternative placeholder image website. – jsea Mar 12 '15 at 22:55