I'm trying to change textarea placeholder to a light grey but cannot seem to.

https://jsfiddle.net/mardystellar/pcvqgzuj/3/

Is there any way I can overwrite the user agent stylesheet? This is my first time dealing with css. I have only found answers to change the border when it is in focus but not in its default form.

<label for="" class="field_label">What</label>
<textarea placeholder="" id=""></textarea>

CSS

textarea {
    resize: both;
    width: 100%;
}

textarea::placeholder {
    border-color: lightgrey;
}

CodePudding user response：

To change the color of the placeholder text you can use the CSS property color in the :placeholder styling.

To change the color of the textarea's border you can use the CSS property border-color in the textarea stylings.

textarea {
  resize: both;
  width: 100%;
  border-color: blue;
}

textarea::placeholder {
  border-color: lightgrey;
  color: red;
}

<label for="" class="field_label">What</label>
<textarea placeholder="this is the placeholder" id=""></textarea>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

CSS code: this changes, the font color in textarea

.textarea {
    resize: both;
    width: 100%;
    border: 1;
    color:lightgrey;
}

and this changes a border color of textarea

   .textarea {
    resize: both;
    width: 100%;
    border: 1;
    border-color:lightgrey;
}

CodePudding user response：

You can do it like this:

border: solid 1px lightgrey

textarea {
    resize: both;
    width: 100%;
    border: solid 1px lightgrey;
}

<label for="" class="field_label">What</label>
<textarea placeholder="" id=""></textarea>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>