CSS attribute selector is used to target input text fields. The input text fields of type ‘text’ can be targeted by using input[type=text].
Note: It is specified that the default attribute values may not always be selectable with attribute selectors, one could try to cover other cases of markup for which text inputs are rendered.
- input:not([type]): It is used when the type attribute is not present in the markup.
- input[type = “”]: It is used when the type attribute is present but empty.
- input[type = text]: It is used when the type attribute is explicitly defined as ‘text’.
Example 1: This example selects the input text fields and uses some CSS property.
html
<!DOCTYPE html><html>
<head>
<style>
input[type="text"] {
width: 400PX;
display: block;
background:lightgreen;
color:black;
text-align:justiy;
font-size: 150%;
}
form {
display:table-cell;
width:50%;
padding:10px;
}
</style>
</head>
<body>
<form name="input"
action=""
method="get">
Bestplatform :
<input type="text"
name="Name"
value="GfG"
size="20">
Fullform :
<input type="text"
name="Name"
value="GeeksforGeeks"
size="20">
</form>
</body>
</html>
|
Output:
Example 2: This example selects the input text fields and use some CSS property.
html
<!DOCTYPE html><html>
<head>
<!-- CSS style to select type attribute -->
<style>
input[type="text"] {
width: 400PX;
display: block;
background:green;
color:white;
text-align:justiy;
font-size: 150%;
}
form {
display:table-cell;
width:50%;
padding:10px;
}
</style>
</head>
<body>
<form name="input"
action=""
method="get">
USER : <input type="text"
name="Name"
value="GeeksforGeeks"
size="20">
PASSWORD : <input type="text"
name="Name"
value="geeksforgeeks"
size="20">
CATEGORY : <input type="text"
name="Name"
value="Studying platform"
size="20">
</form>
</body>
</html>
|
Output: