CSS: readonly property of textarea affects/changes background color

Question

I applied a readonly property to textarea as shown

<textarea readonly>text area content</textarea>

This is the textarea css code

textarea{
  font-size: 15px;
  font-family: "Helvetica Neue";
  margin: 0 0 0.2rem 0;
  color: #000;
  width: auto;
  word-wrap: break-all;

    resize: none;
    overflow: hidden;
    min-height: 5px;
    height: 1px;
    max-height: inherit;
    background: #c3fdb8;
}

The is picture illustrating my present challenge I want to retain the background color of the textarea assuming readonly property is applied.

Answer 1

Try adding

textarea,textarea[readonly] {

...

}

To the css. This'll make sure the browser's default readonly CSS is overruled.