November 13, 2022

How to Make Radio Buttons Invisible in HTML

In this tutorial, you will learn how to make radio buttons invisible in HTML. Typically, the radio buttons are little circles that fill in when they are selected. When you are creating a form, you want to make invisible radio buttons for certain reasons so that the user cannot access the radio buttons.

There are numerous ways to make radio buttons invisible. But for the sake of simplicity, we can use CSS display property to accomplish our goal.

In the following example, we have 2 radio buttons and we will make them make invisible using the CSS display property. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have multiple elements such as div, h3, and input. The parent div element is just a wrapper for the rest of the elements.
The heading tag h3 contains some text.
We have 2 radio buttons to select a gender.
In the head element, we have added a stylesheet (style.css) by using the link element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>invisible radio button</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <h3>Invisible radio buttons</h3>
        <div>
            <input type="radio" name="gender" value="male">Male
        </div>

        <div>
            <input type="radio" name="gender" value="female">Female
        </div>
    </div>



</body>

</html>

CSS

We are using input element selector to select both the radio buttons and setting the CSS display property value to none. As a result, the radio buttons will be invisible to the user.

input{
    display: none;
}

You May Also Like: