How to select text input fields using CSS selector ?
CSS attribute selector is used to targeting an input text fields. The input text fields of type ‘text’ can be targeting 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 type attribute is not present in the markup.
- input[type = “”]: It is used when type attribute is present, but empty.
- input[type = text]: It is used when type attribute is explicitly defined as ‘text’.
Example 1: This example selects the input text fields and use some CSS property.
<!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.
<!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:
Please Login to comment...