Discover How To Style A CSS Radio Button And CSS Superscript And Subscript: With Easy-to-use Examples!
CSS Radio Button
The CSS Radio buttons select an option when a few choices are available. An HTML component called the radio button aids in gathering user input. Although styling the CSS radio button is challenging, pseudo-elements make it simpler.
Although every website uses this HTML element without styling, they all look similar. Therefore, styling them will add variety and appeal to our website. The default radio button will get a new look after being designed with CSS, which is an intriguing and imaginative task.
An HTML markup must be written in order to create the custom radio buttons, and CSS must be written in order to style them. The styling of the radio button will be clear by using some illustrations. Let's see some of the illustrations below.
Example 1
In this example, we're using the sibling combinator, represented by the symbol "~." It chooses every element that the previous selector chose. Additionally, the radio button is styled when the user moves the cursor over it using the pseudo-class:hover.
<!DOCTYPE html>
<html>
<style>
.container {
display: block;
position: relative;
padding-left: 40px;
margin-bottom: 20px;
cursor: pointer;
font-size: 25px;
}
/* Hide the default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* custom radio button */
.check {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 30px;
background-color: lightgreen;
border-radius: 50%;
}
.container:hover input ~ .check {
background-color: blue;
}
.container input:checked ~ .check {
background-color: brown;
}
.check:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .check:after {
display: block;
}
.container .check:after {
top: 8px;
left: 8px;
width: 15px;
height: 15px;
border-radius: 50%;
background: white;
}
</style>
<body>
<h1> Custom Radio Buttons Example</h1>
<h2> Choose your preference </h2>
<label class="container">RICE
<input type="radio" name="radio" checked>
<span class="check"></span>
</label>
<label class="container">DODO
<input type="radio" name="radio">
<span class="check"></span>
</label>
<label class="container">BEANS
<input type="radio" name="radio">
<span class="check"></span>
</label>
<label class="container">YAM
<input type="radio" name="radio">
<span class="check"></span>
</label>
</body>
</html>
We will see another example of styling the radio buttons for a better understanding. The website looks professional when the radio buttons are styled using CSS.select
Example 2
<!DOCTYPE html>
<html>
<head>
<style>
.container{
float: left;
margin: 10px;
}
.right{
float: left;
margin: 10px;
color: blue;
font-size: 20px;
font-weight:bold;
}
.radio {
width: 20px;
position: relative;
}
.radio label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: lightgray;
border-radius: 50px;
box-shadow: inset 0px 1px 1px white, 3px 3px 9px rgba(0,0,0,0.5);
border: 1px solid black;
}
.radio label:after {
content: '';
position: absolute;
top: 4px;
left: 4px;
border: 6px solid blue;
border-radius: 50px;
opacity: 0;
}
.radio label:hover::after {
opacity: 0.3;
}
.radio input[type=radio] {
visibility: hidden;
}
.radio input[type=radio]:checked + label:after {
opacity: 1;
}
</style>
</head>
<body>
<h1>CSS radio buttons Example 2 </h1>
<h2> Click on radio buttons to see the effect </h2>
<div class="container">
<div class="radio">
<input type="radio" value="Male" name='gender' id='male' />
<label for="male"></label>
</div>
</div>
<div class="right">Male</div>
<div class="container">
<div class="radio">
<input type="radio" value="Female" name='gender' id='female' />
<label for="female"></label>
</div>
</div>
<div class="right">Female</div>
</center>
</body>
</html>
CSS Superscript And Subscript
The CSS subscript and CSS superscript text are defined using the sub> and sup> tags. The text in the superscript has a smaller font and is positioned one-half a character above the normal line. Mathematical formulas like x2 - y2 = r2, footnotes, and many other things are commonly written in them.
Subscript text, in contrast to superscript, has a smaller font and a half-character below the normal line. Chemical formulas like H2O, H2SO4, etc, are typically written using this method.
The same result can be obtained in CSS by using the vertical-align property. CSS also allows us to define how text is superscripted and subscripted. This CSS setting describes how the text will be aligned vertically.
In the following section, we will see how to achieve superscripts and subscripts using the vertical-align property. But first, let's talk about this property’s values.
Property Values
Baseline: In this case, the text is aligned to the baseline of the parent element by default.
Super: In this case, the superscript raises the text.
Sub: In this case, the subscript lowers the text.
When the super and sub-values of this property are used, the text takes on either a superscript or subscript appearance.
Example 1- Superscript
<!DOCTYPE html>
<html>
<head>
<style>
#super{
vertical-align:super;
font-size: medium;
}
p{
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<h1> An example using the vertical-align: super; </h1>
<p> Superscripted text is frequently used to indicate exponents (powers of a number), mathematical equations, or formulae. </p>
<h3>x<span id="super">2</span>+ x<span id="super">2</span> = y<span id="super">2</span></h3>
<h3> (x + y)<span id="super">2</span> = x<span id="super">2</span> + y<span id="super">2</span> + 2xy </h3>
<h3>14<span id="super">th</span></h3>
</body>
</html>
Example 2- Subscript
<!DOCTYPE html>
<html>
<head>
<style>
#sub{
vertical-align: sub;
font-size: medium;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h1> An example using the vertical-align: sub; </h1>
<p> Chemical equations are typical examples of subscripts. </p>
<h3> The chemical formula of Water is: H<span id="sub">2</span>O</h3>
<h3> The chemical formula of Sulphuric acid is: H<span id="sub">2</span>SO<span id="sub">4</span></h3>
</body>
</html>
To see other related CSS topics, visit our CSS Tutorial Page.
