How to use CSS color: transparent Property In HTML
In this approach, we will use the CSS color: transparent property to hide a value or text from the HTML input control. The color property in CSS controls the color of the text content of an element. Setting color: transparent makes the text completely transparent, effectively hiding it from view while still preserving its space in the layout.
Example: Hiding a value or text from the HTML Input control using CSS color: transparent Property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Hidden Input Value</title>
<style>
.button {
background-color: #789335;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
margin-top: 15px;
margin-right: 15px;
}
input[type="text"] {
margin-top: 10px;
}
</style>
</head>
<body>
<h6>Hiding a Value or Text from the HTML
Input Control using transparent
</h6>
<input type="text">
<input type="text" style="color: transparent;" value="">
<br>
</body>
</html>
Output:
Output
How to Hide a Value or Text from the HTML Input control ?Using HTML
Hiding values or text from HTML input controls involves concealing information within the web page’s structure so that it’s not immediately visible to the user but can still be accessed and processed by the web application.
This technique is often used for storing sensitive data or for managing information that doesn’t need to be directly displayed to the user.
Table of Content
- Using CSS color: transparent Property
- Using CSS display: none Property
- Using CSS visibility: hidden Property
- Using CSS Opacity Property
Using HTML <input type=”hidden”>
In this approach, we will use the HTML <input type=”hidden”> property to hide a value or text from the HTML Input control. The type=”hidden” attribute specifies that the input field should be hidden from the user interface. While hidden, the input still retains its value but is not visible to the user.
Example: Hiding a value or text from the HTML Input control using Using HTML <input type=”hidden”> Property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Hidden Input Value</title>
<style>
.button {
background-color: #48874a;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
margin-top: 15px;
margin-right: 15px;
}
</style>
</head>
<body>
<h6>Hiding a Value or Text from the HTML Input Control
using <input type="hidden"> Property
</h6>
<input type="hidden" id="hiddenInput"
value="Hidden Value">
<br>
<button class="button" onclick="revealHiddenInput()">
Show Hidden Input Value
</button>
<script>
function revealHiddenInput() {
let hiddenInput =
document.getElementById("hiddenInput").value;
alert("Hidden Input Value: " + hiddenInput);
}
</script>
</body>
</html>
Output:
Output