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:
