How to Apply CSS Style to the Element Name
You can apply a CSS style to the element name by using attribute selectors that match elements based on their attributes.
Watch a video course
CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
Solutions with attribute selectors
In the example below, we style the name attribute of the <input> element with the CSS background, width, height, and border properties.
Example of applying some CSS styles to the element name:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[name="username"] {
background: #76d67e;
width: 200px;
height: 25px;
padding: 0 5px;
border: 2px solid #cccccc;
}
</style>
</head>
<body>
<input type="text" name="username" autofocus>
</body>
</html>
Result
Let’s see another example, where we use two <input> elements, one of them with the name attribute, which must be styled.
Example of applying a CSS style to the element name:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[name="age"] {
width: 50px;
}
</style>
</head>
<body>
<h1>Example of applying a CSS style to the element name:</h1>
<form>
<input type="text" placeholder="Name">
<input type="number" name="age" min="0" placeholder="Age">
</form>
</body>
</html>