How to Apply CSS Style to the Element Name
In this snippet, we’re going to demonstrate how you can apply CSS styles to the name of the element. For that, you can use attribute selectors. See examples.
You can apply a CSS style to the element name by using attribute selectors that match elements based on their attributes.
Solutions with attribute selectors
In the example below, we style the <span class="attribute">name</span> 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
<div class="demo px-2.5 mt-1 mb-5"> <input autofocus="" name="username" type="text">``</input> </div>Let’s see another example, where we use two <input> elements, one of them with the <span class="attribute">name</span> 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>