What CSS selector do I need to use for changing CSS (font-size, color, etc) of a input text box placeholder.

following is the input LWC that I'm using :-

  value ={test}
  placeholder="Here goes placeholder"
  onchange = {onTestChange}>

I tried using following CSS selectors but none worked

input::-webkit-input-placeholder {
color: red !important;

input:-moz-placeholder { /* Firefox 18- */
color: red !important;  

input::-moz-placeholder {  /* Firefox 19+ */
color: red !important;  

input:-ms-input-placeholder {  
color: red !important;  

Any help/pointers are appretiated.

  • You can go with external CSS, create a static resource and include in the component and also you can use the scope to apply the CSS rules only on the items inside the component where you are using this external CSS. – itzmukeshy7 May 27 '19 at 10:43
  • Thanks for reply. But how is writing external CSS different from writing the code in .CSS file for that particular component. If not, I already mentioned that I have been trying to manipulate the req properties in .CSS file still it is not getting applied to the component. . – Shri May 27 '19 at 12:06
  • It's completely different in the external CSS file or static resource, it will be applied as we have written, lightning won't add anything to the selector, scope identifier like it adds to the CSS rules bundled with lightning web component. – itzmukeshy7 May 27 '19 at 12:09
  • It worked, thankyou @itzmukeshy7 – Shri May 28 '19 at 7:43
  • Yup it works fine, but make sure to wrap your component related CSS inside a scope so that it doesn't apply outside your component. – itzmukeshy7 May 28 '19 at 7:52

You can't change the CSS of a component because of CSS isolation, a feature of the Shadow DOM introduced with LWC. You would need to write your own component, instead.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.