Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 the specific elements on the webpage. Text input fields are an essential part of any web form that requires users to provide input.
In this article, we are having three input fields. Out of three. two input fields are of text input type and remainig one is if password input type. Our task is to select text input fields using CSS selector.
Aproaches to Select Text Input Fields
Here is a list of approaches to select text input fields using CSS selector which we will be discussing in this article with stepwise explaination and complete example codes.
- Selecting Text Input Fields using type Selector
- Selecting Text Input Fields using id Selector
- Selecting Text Input Fields using class Selector
- Selecting Text Input Fields using attribute Selector
Selecting Text Input Fields using type Selector
To select text input fields using CSS selector, we will be using type selector to select all text input fields in the form.
- We have used "input[type="text"]", which selects all input fields with input type text.
- After selecting all text input type, we have used CSS properties to apply styles to them. We have increased the font-size, added a border, applied padding and bottom margin using margin-bottom property.
Example
Here is a complete example code implementing above mentioned steps to select text input fields using type selector. Here styles will be applied only to text input type not password input type.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
input[type="text"] {
border: 2px solid #031926;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<h3>
Selecting Text Input Fields using CSS Selector
</h3>
<p>
In this example we have used <strong>type
</strong> selector to select text input
fields .
</p>
<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 your Password">
<br>
</form>
</body>
</html>
Selecting Text Input Fields using id Selector
In this approach, to select text input fields using CSS selector, we will be using id selector to select all text input fields in the form specified by id name.
- We have used "#txt1, #txt2", which selects all input fields with input type text and leaving out password type input field.
- We have used background-color to add a background color for the text input fields and other styles mentioned in approach first.
- We have also changed the text color of placeholder using ::placeholder psuedo element.
Example
Here is a complete example code implementing above mentioned steps to select text input fields using id selector. Here styles will be applied only to text input type not password input type.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
#txt1, #txt2 {
background-color: #04af2f;
color: white;
border: 1px solid #031926;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
}
::placeholder {
color: white;
}
</style>
</head>
<body>
<h3>
Selecting Text Input Fields using CSS Selector
</h3>
<p>
In this example we have used <strong>id
</strong> selector to select text input
fields .
</p>
<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 your Password">
<br>
</form>
</body>
</html>
Selecting Text Input Fields using class Selector
In this approach, to select text input fields using CSS selector, we will be using class selector to select all text input fields in the form.
- We have used ".txt", which selects all input fields with input type text and leaving out password type input field.
- After selecting the text type input field, we have apllied the same styles as in approach first and second to design the text input field.
Example
Here is a complete example code implementing above mentioned steps to select text input fields using class selector.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.txt {
background-color: #04af2f;
color: white;
border: 1px solid #031926;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
}
::placeholder {
color: white;
}
</style>
</head>
<body>
<h3>
Selecting Text Input Fields using CSS Selector
</h3>
<p>
In this example we have used <strong>id
</strong> selector to select text input
fields .
</p>
<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 your Password" class="pswd">
<br>
</form>
</body>
</html>
Selecting Text Input Fields using attribute Selector
In this approach, to select text input fields using CSS selector, we will be using attribute selector to select text input fields in the form.
- We have used "input[name="usrname"]", which selects the input field with name attribute value as "usrname" and leaving out password type input field.
- After selecting the text type input field, we have apllied the same styles as in approach first and second to design the text input field.
Example
Here is a complete example code implementing above mentioned steps to select text input fields using attribute selector.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
input[name="usrname"] {
border: 2px solid #031926;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<h3>
Selecting Text Input Fields using CSS Selector
</h3>
<p>
In this example we have used <strong>type
</strong> selector to select text input
fields .
</p>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="usrname"
placeholder="Enter username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
placeholder="Enter your Password">
<br>
</form>
</body>
</html>
Conclusion
To select text input fields using CSS selector is a simple process and we have understood four different approaches to implement this which are: by using type selector, by id selector, by class selector and by using attribute selector.
6K+ Views
