Conceal the input field that contains the placeholder "Maximum contacts reached"

I have a PeoplePicker element that displays a disabled input field with the placeholder text "Maximum contacts added". How can I hide it using CSS?

When inspecting the code, the following HTML structure is revealed:

<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 attempted to use the following CSS rules:

#control {
    display: none;
}

and

.control {
    display: none;
}

However, the input field remains visible.

Any help would be greatly appreciated. Thank you!

Answer №1

Utilize an attribute selector to target 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">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble understanding why the border-radius attribute is not being applied to tables?

I've been trying to give the outer corners of tables a rounded appearance in HTML/CSS, but I can't seem to get the border-radius property to work properly. After inspecting the elements in Chrome's computed section, I noticed that the eleme ...

Tips for creating a repeating background image using CSS

I am trying to set a background image as gried.png in welcome.blade.php within my app. I have created a class selector file in the css folder for this purpose. Below is the content of my welcome.css file located in the public/css folder: .background-image ...

Modifying the font style within an ePub document can affect the page count displayed in a UIWebView

Currently in the development phase of my epubReader app. Utilizing CSS to customize the font style within UIWebView, however encountering a challenge with the fixed font size causing fluctuations in the number of pages when changing the font style. Seeki ...

Using Google-Prettify with AngularJS

I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker ...

Windows and MacOS each use unique methods for displaying linear gradients

Check out this code snippet featuring a background gradient background: rgba(0,0,0,0) linear-gradient(rgb(245, 245, 245),rgba(0,0,0,0)) repeat scroll 0 0; This code renders correctly on Windows (chrome, ie, firefox) https://i.stack.imgur.com/XU2gW ...

show small previews of pictures stored in a JavaScript array by using a for-loop

Currently stuck on a university project where I've set up an array of images like this: var testdata = [ { "imageID": 17, "uploadedDate": "2020-07-31 03:56:56.243139", "filepathOriginal": &qu ...

adding a touch of flair to a form input that doesn't quite meet the

My goal is to have a red background appear when an input is invalid upon form submission. I attempted the following code: input:invalid { background-color:red; } While this solution worked, it caused the red background to show up as soon as the page l ...

Unable to utilize the rupee font within a select element on Chrome and IE8 browsers

Issues with displaying rupee font in select element on Chrome and IE8 I have implemented WebRupee for showing the Indian currency symbol. The font appears correctly when used within a <p> tag, but when placed inside a select option element, it only ...

How can you use jQuery to take the input value and assign it as a class to the label surrounding it?

I need a simple solution: how can I retrieve the input value and apply it as a class to the same input? For example, I want to extract the value "gray" and add class="gray" to the surrounding label in order to style the label text that says "Gray". This i ...

Styling the cursor in an input box: Using CSS and Javascript

After spending some time delving into the code of wallbase.cc, I've been trying to uncover the secret behind styling the input box similar to the one featured on their homepage. My main curiosity lies in how they achieve the quickly blinking cursor an ...

How can I achieve this particular design using flexbox?

Check out the image here: . I'm struggling to understand the examples and live flex configurators. Are they only showing simple examples, or am I just not grasping it? Is it possible for me to use media queries to hide a4 when the screen is less than ...

Alter the color of the initially chosen option in the dropdown selection

I'm struggling to modify the color of the initial selection while keeping the remaining selection-options at their default black color. Unfortunately, I haven't been successful in achieving this. Currently, all colors are #ccc. What I want is fo ...

What is the best way to create a horizontal scrolling feature for a two-row layout using Bootstrap?

When using one row, the script works successfully. Here is an example of the code: html : <div class="testimonial-group"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> < ...

Troubleshooting Symfony2 and Assetic: Why are my CSS-linked images not loading?

I've encountered an issue with my CSS sprite sheet that my CSS file seems unable to locate the image. Despite following the provided solution here, I'm still facing the same problem. The directory structure of my bundle is as follows: src/ v ...

Vertical Dragging Division of Space

I am looking to create a draggable division that separates two areas vertically, similar to the images below: https://i.sstatic.net/AC9Gt.pnghttps://i.sstatic.net/xA4cX.png I found an online example of draggable divs and customized it to suit my needs. I ...

Instructions for converting SCSS to CSS and storing the CSS code as a string in a variable

I am currently developing a Single Page Application (SPA) using Vue (specifically Quasar), and I have the following requirements: Load the contents of a CSS file into a JavaScript variable or Vue data property dynamically The CSS file should be generated ...

When using percentages in HTML, the height and width of a background picture may not scale correctly

Currently, I am utilizing Webstorm software purely for HTML and CSS without any additional plugins. In my code, there is a <section> element that only has the <html> and tags as its parent elements. This particular section is assigned an ID th ...

Show another div once you've scrolled beyond the first

Instead of following tutorials that make a div appear after scrolling down a set number of pixels, I am looking to achieve something different. I want a div to appear when the user scrolls past another div, and then disappear again when they scroll back up ...

the recurring pattern of media conditions in every single column

Hello, I'm currently involved in a project where I have implemented media conditions for my columns using Sass. Here is the code snippet: // Mobile media - 320px width @mixin mobile{ @media only screen and (max-width:767px){ width: 300px; } } B ...

Converting CSS styles with media queries and handling other special cases into a PHP array

Need help converting a CSS file to a PHP array. Here is the code snippet I am using: function convertCssToPhpArray($css_str) { $css = array(); // TODO: handle external css files $css_str = preg_replace('/(@import\s+["\'].+ ...