PrimeNG AutoComplete组件CSS样式设置：修改输入文本颜色为白色

Hey there! Let's get that PrimeNG AutoComplete input text showing up as white for you. Since PrimeNG components use nested DOM structures, we need to target the actual input element inside the AutoComplete wrapper. Here's how to do it with your existing setup:

Step 1: Target the Inner Input Element #

You've already added a custom styleClass="myclass" to your AutoComplete component, which is perfect for scoping our styles without affecting other components. Add this to your top-bar.component.css:

/* Target the input field inside your custom AutoComplete class */
.myclass .p-autocomplete-input {
  color: white;
  /* Optional: Add a dark background to make white text readable (adjust as needed) */
  background-color: #2d2d2d;
  border-color: #555;
}

Optional: Style Dropdown Suggestions (If Needed) #

If you also want the dropdown suggestion text to be white, add this additional rule to keep the styling consistent:

/* Style the dropdown items' text */
.myclass .p-autocomplete-items .p-autocomplete-item {
  color: white;
  background-color: #2d2d2d;
}

/* Highlight color for selected dropdown item */
.myclass .p-autocomplete-items .p-autocomplete-item-highlight {
  background-color: #444;
  color: white;
}

Why This Works #

PrimeNG's AutoComplete renders a wrapper element with your myclass, and inside it is an input with the built-in p-autocomplete-input class. By combining your custom class with PrimeNG's internal class, we ensure our styles take precedence over the default component styles.

内容的提问来源于stack exchange，提问作者Rama Krishna. G