Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Styling Forms with CSS Attribute Selectors
CSS attribute selectors allow you to apply styles to HTML elements based on the presence or value of their attributes. This is particularly useful for styling forms, where you can target specific input types, required fields, or elements with particular attributes.
Syntax
/* Basic attribute selector */
element[attribute] { property: value; }
/* Attribute with specific value */
element[attribute="value"] { property: value; }
/* Attribute containing value */
element[attribute*="value"] { property: value; }
The [attribute] Selector
The [attribute] selector selects elements with a specified attribute, regardless of its value. Here, links with the target attribute are styled −
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: red;
color: white;
padding: 5px 10px;
text-decoration: none;
border-radius: 3px;
}
</style>
</head>
<body>
<h2>Attribute Selector Example</h2>
<a href="https://www.tutorialspoint.com" target="_blank">TutorialsPoint</a><br><br>
<a href="http://www.example.com">Regular Link</a>
</body>
</html>
A styled red button appears for the first link with target attribute, while the second link remains unstyled.
The [attribute="value"] Selector
The [attribute="value"] selector targets elements with a specific attribute value. Here, only links with target="_blank" are styled −
<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
background-color: #007bff;
color: white;
padding: 8px 15px;
text-decoration: none;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Specific Value Selector</h2>
<a href="https://www.tutorialspoint.com" target="_blank">Opens in New Tab</a><br><br>
<a href="http://www.example.com" target="_self">Opens in Same Tab</a>
</body>
</html>
Only the first link with target="_blank" gets the blue button styling. The second link with target="_self" remains unstyled.
Common Attribute Selector Types
| Selector | Description | Example |
|---|---|---|
[attribute] |
Elements with attribute | input[required] |
[attribute="value"] |
Exact value match | input[type="text"] |
[attribute~="value"] |
Contains word | p[class~="highlight"] |
[attribute|="value"] |
Starts with value | p[lang|="en"] |
Example: Styling Form Elements
This comprehensive example shows how to style different form input types using attribute selectors −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
form {
background: white;
padding: 20px;
border-radius: 10px;
max-width: 400px;
}
/* Style text inputs */
input[type="text"], input[type="email"] {
width: 100%;
padding: 12px;
margin: 8px 0;
border: 2px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
font-size: 16px;
}
/* Style password inputs */
input[type="password"] {
width: 100%;
padding: 12px;
margin: 8px 0;
border: 2px solid #ff6b6b;
border-radius: 5px;
background-color: #ffe6e6;
}
/* Style submit button */
input[type="submit"] {
background-color: #28a745;
color: white;
padding: 12px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
/* Style required fields */
input[required] {
border-left: 4px solid #007bff;
}
label {
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<form>
<h2>Registration Form</h2>
<label for="fname">First Name (Required):</label>
<input type="text" id="fname" name="fname" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Register">
</form>
</body>
</html>
A styled registration form appears with: - Text/email inputs with gray borders and light background - Password input with red border and pink background - Required field (First Name) with a blue left border - Green submit button All elements are neatly styled within a white rounded container.
Conclusion
CSS attribute selectors provide precise control over element styling based on their attributes. They're especially powerful for form styling, allowing you to create distinct visual cues for different input types, required fields, and interactive elements without adding extra classes.
493 Views
