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.

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>