Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to select text input fields using CSS selector?
To select text input fields using CSS selector, is a powerful and crucial tool for styling and targeting specific elements on webpages. Text input fields are essential components of web forms that require user input.
In this article, we will explore different methods to select and style text input fields while excluding other input types like password fields.
Syntax
/* Type selector */
input[type="text"] { /* styles */ }
/* ID selector */
#elementId { /* styles */ }
/* Class selector */
.className { /* styles */ }
/* Attribute selector */
input[attribute="value"] { /* styles */ }
Approaches to Select Text Input Fields
Here are the main approaches to select text input fields using CSS selectors
Method 1: Using Type Selector
The type selector input[type="text"] targets all input elements with type="text" attribute. This method is most commonly used when you want to style all text inputs uniformly.
Example
The following example styles only text input fields, excluding the password field ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
input[type="text"] {
border: 2px solid #031926;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
border-radius: 5px;
width: 250px;
}
label {
display: inline-block;
width: 80px;
text-align: left;
margin-right: 10px;
}
</style>
</head>
<body>
<h3>Selecting Text Input Fields using Type Selector</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter username">
<br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" placeholder="Enter Email ID">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter Password">
<br>
</form>
</body>
</html>
A form with three input fields appears. The two text input fields (Name and Email) have dark blue borders, padding, and rounded corners, while the password field remains unstyled.
Method 2: Using ID Selector
The ID selector allows you to target specific text input fields by their unique ID attributes. Use comma separation to select multiple IDs.
Example
The following example uses ID selectors to style specific text input fields ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
#txt1, #txt2 {
background-color: #04af2f;
color: white;
border: 1px solid #031926;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
border-radius: 5px;
width: 250px;
}
#txt1::placeholder, #txt2::placeholder {
color: #e0e0e0;
}
label {
display: inline-block;
width: 80px;
text-align: left;
margin-right: 10px;
}
</style>
</head>
<body>
<h3>Selecting Text Input Fields using ID Selector</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="txt1" name="name" placeholder="Enter username">
<br>
<label for="email">Email:</label>
<input type="text" id="txt2" name="email" placeholder="Enter Email ID">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter Password">
<br>
</form>
</body>
</html>
A form appears with green text input fields (Name and Email) that have white text and light gray placeholders, while the password field remains unstyled.
Method 3: Using Class Selector
The class selector targets elements with a specific class attribute. This method is useful when you want to apply the same styling to multiple elements across different pages.
Example
The following example uses class selectors to style text input fields ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.txt {
background-color: #4169e1;
color: white;
border: 2px solid #1e3a8a;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
border-radius: 5px;
width: 250px;
}
.txt::placeholder {
color: #c0c0c0;
}
label {
display: inline-block;
width: 80px;
text-align: left;
margin-right: 10px;
}
</style>
</head>
<body>
<h3>Selecting Text Input Fields using Class Selector</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter username" class="txt">
<br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" placeholder="Enter Email ID" class="txt">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter Password" class="pswd">
<br>
</form>
</body>
</html>
A form with blue text input fields (Name and Email) appears, featuring white text and gray placeholders, while the password field without the "txt" class remains unstyled.
Method 4: Using Attribute Selector
Attribute selectors can target elements based on specific attribute values. This method provides more granular control over element selection.
Example
The following example uses attribute selector to style an input field with a specific name attribute ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
input[name="username"] {
border: 3px solid #dc143c;
padding: 15px;
font-size: 18px;
margin-bottom: 15px;
border-radius: 8px;
width: 250px;
background-color: #ffe4e1;
}
label {
display: inline-block;
width: 80px;
text-align: left;
margin-right: 10px;
}
</style>
</head>
<body>
<h3>Selecting Text Input Fields using Attribute Selector</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="username" placeholder="Enter username">
<br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" placeholder="Enter Email ID">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter Password">
<br>
</form>
</body>
</html>
A form appears where only the first input field (with name="username") is styled with a red border and light pink background, while the email and password fields remain unstyled.
Conclusion
CSS provides multiple ways to select text input fields: type selector for all text inputs, ID selector for specific elements, class selector for reusable styling, and attribute selector for attribute-based targeting. Choose the method that best fits your styling requirements and HTML structure.
7K+ Views
