CODEWITHSUNDEEP
htmlcss
Dan
Dan

Reputation: 33

Can not change text input color

I am trying to change the input color to white on the following element:

<textarea name="message" id="textarea1" class="materialize-textarea" required="" style="height: 45px;"></textarea>

Adding color: white !important; to the id, class or textarea does not work, in the developer tools it does work when I add the rule to:

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea

When I add the color rule to the local file on the same line it does not get applied for some reason, how can I change this text input color to white?

Upvotes: 2

Views: 1214

Answers (5)

Willem van der Veen
Willem van der Veen

Reputation: 36680

Okay here is a new answer. This is the most aggressive specficity in CSS this should override the older ones. Try this:

<textarea id="textarea1" style="color:white !important;"></textarea>

This combines the inline specifity with the !important specficity which are both really high (!important highest, inline second highest)

Hopefully this works.

Upvotes: 0

Nemus
Nemus

Reputation: 3993

You probably have some overrides issue:

#textarea1{
color: #fff;
background: red;
}
<textarea name="message" id="textarea1" class="materialize-textarea" required="" style="height: 45px;"></textarea>

Upvotes: 1

Dan
Dan

Reputation: 33

Nothing worked using default CSS ways but got it to work by adding this to the textarea in the HTML:

style="color: white !important;"

Upvotes: 0

Willem van der Veen
Willem van der Veen

Reputation: 36680

#textarea1 {
  color: white;
  background-color: gray;
}
<textarea name="message" id="textarea1" class="materialize-textarea" required="" style="height: 45px;"></textarea>

Your problem is probably an CSS priority conflict where another style is overriding your style. You can solve this by choosing a higher priority or use !important after a style.

Upvotes: 0

Simon R
Simon R

Reputation: 3772

It works in this this jsfiddle, therefore you most likely have another rule further down your CSS file which is overriding your setting. Failing that you could always make color: #ffffff !important; but this is less desirable if you can fix it the other way.

(Note: I've used pink in the jsfiddle to make sure it's actually working)

Upvotes: 0

Related Questions