CODEWITHSUNDEEP
htmlcss
Goldbones
Goldbones

Reputation: 1457

Several Ids in input in CSS

So I want to customize several inputs. I tried with this and it works fine:

<!DOCTYPE html>
<html>
<head>
<style>

input[id=a]:focus {
  width: 250px;
}
</style>
</head>
<body>
<h1>The width Property</h1>

Searcha: <input type="text" name="search" id="a">
Searchb: <input type="text" name="search" id="b">

</body>
</html>

However, I wanted to put more ids on input. It´s possible?

//try
    input[id=a b]:focus {
      width: 250px;
    }

Upvotes: 0

Views: 74

Answers (3)

Adrian
Adrian

Reputation: 8597

There isn't a selector that can target multiple values of a single attribute.

Instead you'll unfortunately need a comma separated list of the whole selector with different values like so:

input[id="a"]:focus, input[id="b"]:focus {
  width: 250px;
}

A class in this case would be more beneficial.

Upvotes: 2

treyBake
treyBake

Reputation: 6560

You can chain selectors in css like this:

#foo, #bar {
    color: red
}

However, if you have >5 ids this can get a bit tedious and at that point it would be better to use a class:

HTML:

<input class="search-input" />
<input class="search-input" />

CSS:

.search-input {
    color: red
}

Upvotes: 4

ratbum
ratbum

Reputation: 1023

#a, #b {}

It's really that simple.

Upvotes: 2

Related Questions