CSS sets the input box part to a password input box
CSS sets the input box part as a password input box
In web development, you often encounter scenarios where users need to enter passwords. To protect user privacy and security, we need to hide the passwords they enter, making them invisible. In HTML, we use the <input> element to create an input field. Using CSS, we can style it as a password input field, effectively hiding the password.
This article will detail how to use CSS to set part of an input field as a password input field, making the passwords entered by users invisible.
Creating a Password Input Box in HTML
First, let’s create a simple HTML file to demonstrate the password input box. The following is a simple HTML code snippet that contains a password input box:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Input Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter your password">
</body>
</html>
In the code above, we use the <input> element and set its type attribute to password, thus creating a password input box.
Using CSS to Style the Password Input Box
Next, we’ll use CSS to style the password input box to make it more aesthetically pleasing and functional. Create a CSS file called styles.css and add the following style code to it:
input[type="password"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
input[type="password"]:focus {
border-color: #3498db;
}
label {
font-weight: bold;
margin-right: 10px;
}
In the code above, we added some basic styles to the password input field, including padding, borders, border radius, and outline. We also set the border color to blue when the password input field is focused.
Runtime Results
Save the above two sections of code in the same directory and open the HTML file in a browser to see a styled password input field. When the user enters a password, the input will be hidden as dots to ensure password security.
Using simple HTML structure and CSS styles, we have implemented a beautiful password input field, enhancing the user experience.
Summary: This article details how to use HTML and CSS to create a password input box and add styles to it to make it more beautiful and practical.