How to select text input fields using CSS selector ?
Last Updated :
03 Aug, 2023
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 >
< 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:
Share your thoughts in the comments
Please Login to comment...