text color bootstrap in textarea

Issue

	<div class="container">
	  <h2>Log</h2>
	  <div class="panel-group">
		<div class="panel panel-default">
		  <div class="panel-heading">
			<h4 class="panel-title">
			  <a data-toggle="collapse" href="#collapseLog">Logger</a>
			</h4>
		  </div>
		  <div id="collapseLog" class="panel-collapse collapse">
			<div class="panel-body"> 
				<label for="comment">Log:</label>
				<textarea class="form-control" rows="5" id="comment"></textarea>
			</div>
		  </div>
		</div>
	  </div>
	</div>

am trying to create a WSocket logger and I am trying to Change the Color of the font to green and the Background to gray

doing this in the style Change the Background prefectly:

textarea{ 
    background-color:gray !important;
}

but if I try to set the text-font Color doing this:

textarea{ 
    background-color:gray !important;
    color: #fff;
}

doenst work...

how can I achieve this?

Thanks!

Solution

You should use a stronger selector on the textarea to override the bootstrap css. For example:

#comment {
  color: #fff;
}

PS: Obviously you can use !important on that line as well, however it's for extremely rare cases and otherwise considered as (very) bad practice. I'd say that even the usage of #id is a bit of an overkill.

Here is a great guide about selector specificity: selector specifities and strengths

Answered By - PeteyRedbeard