Skip to main content

Custom Radio Buttons With Images

Custom Radio Button

Simple radio button can be created by giving input type as "radio"

Standard radio button cration using input tag, giving type as radio.

Hence a group of radio buttons are created,

What if you wanted to create some colorful radio buttons apart from the typical ones!! 

First step is to create a radio button inside a label, so that the name for radio button can be given in label. A label followed by an input with the type as "radio" and then followed by a span in which image for the radio button can be given.


Input's id must be given as "for" in label, to map the particular radio input to the respective label. "Name" must be given the same for all radio buttons inside a radio group, in this case, name is given as "smiley".

In this example I have created three radio inputs which asks for your favorite smiley.


The above code gives the following output,
Now we have to style the radio button in order to replace the boring radio button with our colorful images.

First and foremost we have to make the boring radio button invisible,


The output of above code is,

Next step is to position the images in place of the typical radio button.

for the span below input tag, give the images as background  and style the span tag with width, height as below,

After giving the images as background for span, we get the following output,


Pretty cool right? Come on lets make more cool :P

It will be awesome if we make the smiley change images when clicked isn't it? So that we would know which option we chose.

To achieve that, we have to give styles for the span when the corresponding radio button is clicked. This can be implemented using "checked" attribute of the input tag.


In the above code, when an input tag of type "radio" is checked(clicked) , it's sibling span element's background image will change accordingly. For the sibling selection purpose, we have used '~' selector.

Hence upon clicking a particular option, image will change correspondingly,





You can check working code in jsFiddle

Thank you!!






Comments

Post a Comment

Popular posts from this blog

Contact Number Input boxes

Many forms will have a field for contact number. Contact number can be given as a single input box What if we wanted to separate the contact number input box into two or more fields? For getting mobile number as input, we can have 3 boxes. First box and second box accepting three numbers and third box accepting 4 numbers. To implement this, we have to create 3 input elements, In order to get only 3 numbers in first two inputs and   4 numbers in last input, we can use the maxlength property Don’t forget to give space after maxlength = 3 and input closing tag. Thus we have three input boxes which accepts 3,3, 4 inputs respectively. Let us make the boxes little cooler!!! Imagine the cursor moving automatically to the next input box when maximum length is reached !!! This can be achieved via Javascript. You can find working code here  jsFiddle Thank you!!
Post a Comment
Read more

Setting Opacity for border

When you want to give opacity for border alone usually we try the following css, .reduce-border-opacity{       width: 150px;     height: 150px;     border: 5px solid black;     opacity: 0.5;     background-color: grey; } The above css will reduce the opacity of the element with class  “reduce-border-opacity” as shown below, So to reduce the opacity of border alone, give the following css           .reduce-border-opacity{            width: 150px;                     height: 150px;                    border: 5px solid  rgba(0,0,0,0.5);                     background-color: grey;       } Give your opacity as the last property in rgb...
Post a Comment
Read more