Pure CSS Hiding Elements
Last Updated :
12 Apr, 2022
While making an interactive website, there may be elements that need to be hidden by default or on some action of the user. In this article, we will be seeing how to hide elements in Pure CSS.
Pure CSS Hiding Elements Classes:
- hidden: This class is used to hide elements while supporting old browsers like Internet Explorer.
Include the Pure CSS Base Module: The hiding utility comes with the base module of Pure CSS. So to use the hiding utility we need to include the base module in our HTML file. The link to include the base module is given below:
<link rel=”stylesheet” href=”https://unpkg.com/purecss@1.0.1/build/base-min.css”>
Syntax:
1. Using the hidden attribute:
<element hidden> ... </element>
2. Using the hidden class:
<element class="hidden"> ... </element>
Example1: This example shows how to hide elements using the hidden attribute using Pure CSS. Note that using hidden attributes does not hide elements on old browsers like Internet Explorer.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Hiding Elements</title>
<link rel="stylesheet" href=
<style>
body{
text-align: center;
}
h2{
margin-bottom: 10px;
}
h3{
margin-top: 0px;
}
.header{
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="header">
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Pure CSS Hiding Elements</h3>
</div>
<p><b>Input without hidden attribute:</b></p>
<input type="text" name="name"
placeholder="Enter Name">
<p><b>Input with hidden attribute:</b></p>
<input type="text" name="name"
placeholder="Enter Name" hidden>
</body>
</html>
|
Output:
Example2: This example shows how to hide elements using hidden class on the element. This also works on old browsers like Internet Explorer.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Hiding Elements</title>
<link rel="stylesheet" href=
<style>
body{
text-align: center;
}
h2{
margin-bottom: 10px;
}
h3{
margin-top: 0px;
}
.header{
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="header">
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Pure CSS Hiding Elements using
<i>hidden</i> class
</h3>
</div>
<p><b>Input without hidden class:</b></p>
<input type="text" name="name"
placeholder="Enter Name">
<p><b>Input with hidden class:</b></p>
<input type="text" name="name"
placeholder="Enter Name" class="hidden">
</body>
</html>
|
Output:
Reference: https://purecss.io/base/#extras
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...