CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Johnathon64
Johnathon64

Reputation: 1320

Elements are not changing colour

I have tried to write some basic CSS to change the style properties of a set of elements, however only some of them change to the background colour I want, whilst the rest stay white. for example my textarea, select and bootstraps panel heading will not change colour.

 <div class="panel panel-default" draggable="true">
        <div class="panel-heading">
            <h3 class="panel-title">
                Panel title
                <span class="glyphicon glyphicon-pencil panel-icons"></span>
                <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
                <span class="glyphicon glyphicon-trash panel-icons"></span>
            </h3>
        </div>
        <div class="panel-body" id="testchart">
            CHART GOES HERE
        </div>
    </div>

and here is what I have attempted so far in my CSS

input[type="text"], textarea, option, #device-panel, .modal-body, .panel-body{
        background-color : #262626;
        color: #ffffff;
}

.panel-heading {
    background-color : #1E1F1F;
    color: #ffffff;
}

my textarea's background colour and text colour also does not change and so along with my select control. However with the select control, the options do change to the background colour I want and text colour.

Upvotes: 0

Views: 143

Answers (2)

Ahs N
Ahs N

Reputation: 8366

Your Panel heading is not changing color because it is being overwritten by the default Bootstrap styling. Use !important keyword to forcefully overwrite the css like so:

.panel-heading{
    background-color : #1E1F1F !important;
    color: #ffffff !important;
}

Have a look at this JSFiddle

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Try this?

input[type="text"], select, textarea, option, #device-panel, .modal-body, .panel-body{
  background-color : #262626;
  color: #ffffff;
}

.panel-heading {
  background-color : #1E1F1F;
  color: #ffffff;
}
<textarea>test</textarea>
<select>
  <option>1</option>
  <option>2</option>
</select>

Upvotes: 0

Related Questions