CODEWITHSUNDEEP
csspeoplepicker
Ofer Gal
Ofer Gal

Reputation: 883

hide input tag whose placeholder is "Max contacts added"

I have a single select PeoplePicker that shows a disabled input tag with a placeholder "Max contacts added". How should I select it with CSS to set disply:none on it?

the dev tool shows:

<input 
  class="control" 
  part="control" 
  id="control" 
  placeholder="Max contacts added" 
  type="text" 
  aria-atomic="true" 
  aria-label="Maximum contact selections reached" 
  aria-live="assertive" 
  disabled="true"
>

I tried

#control {
    display: none;
}

and

.control {
    display: none;
}

But it is still there Thank you

Upvotes: 0

Views: 38

Answers (1)

Paulie_D
Paulie_D

Reputation: 115289

Use an attribute selector with the placeholder text.

input[placeholder="Max contacts added"]


input[placeholder="Max contacts added"] {
  background: lightblue;
}
<input class="control" part="control" id="control" placeholder="Max contacts added" type="text" aria-atomic="true" aria-label="Maximum contact selections reached" aria-live="assertive" disabled="true">

Upvotes: 0

Related Questions