HTML
and CCS are two main coding technologies through which a website is built. HTML
is the basic building block of a website while CSS is used to make the website
more beautiful.
When we are building a website, in many situations we
have to create multiple choice questions such as 'What is your gender?', and users have to answer this question. As the
answer is repetitive and the same for users (either male or female), typing box
may not be a good choice in this situation to answer this question. Thus, the
radio button can be used in this type of situation.
We can easily create a radio button using an HTML radio
button, however, the radio button created only by HTML is unattractive and
simple. So, the CSS can be used to decorate them. In this article, we will
create a radio button using HTML & CSS.
{tocify} $title={Table of Contents}
Code Explanation
In this project, different properties of HTML and CSS are
used. Although we can use any text editor software. The software used for this
project is visual studio code.
HTML part
We should always type HTML code in the body part. Here, a new div is created with the class name ‘radio’. In this div, three different radio buttons are created.
With common name gender and labels male, female and
other respectively. The first radio button is checked so that by default the
male button could be checked.
CSS part
First, we design the body part. The first command
‘display flex’’ is used so that we can easily change the position of HTML
objects. The align items and justify content are selected as a center to move
our main part to center.
Then, ‘class radio’ is designed. The background is selected
with a mixture of two different colors with linear gradient property. The
box-shadow is also created. The border-radius is used to make the corners of
the radio div curved.
The inputs of ‘class radio’ are also designed using CSS.
The white color is used for text and the pre-built radio button provided by
HTML is hidden by using the apparent property.
Now, the following code is used to customize radio
buttons when they are checked. In the final step, we use the attr property to
display the label of the radio button.
Full Code
Video Tutorial