Question

I was wondering if it is possible to specify elements in CSS where an attribute is equal to one of two values, something like this:

input[type=text][type=password]

However this selector does not seem to work (I assume because specifying the same attribute twice is not valid), does anyone know how to do this?

Answer 1

You may simply list them as individual selectors:

input[type="username"],
input[type="password"] {
  color: blue;
}

<form>
  Username: <input type="username" name="Username" value="Username" />

  Password: <input type="password" name="Password" value="Password" />

  <input type="submit" value="Submit" />
</form>