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.
- In the HTML file, we have multiple elements such as
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.
<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">
<h3>Invisible radio buttons</h3>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
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.