Question

我曾尝试编写一些基本的CSS来更改一组元素的样式属性，但只有一些会改变为我想要的背景颜色，而其余的则保持白色。例如我的textarea，select和bootstraps面板标题不会改变颜色。

 <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>

这是我迄今为止在CSS中尝试的内容

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

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

我的textarea的背景颜色和文字颜色也不会改变，因此我的选择控件也是如此。但是使用选择控件时，选项会更改为我想要的背景颜色和文本颜色。

Answer 1

您的Panel标题没有改变颜色，因为它被默认的Bootstrap样式覆盖。使用!important关键字强制覆盖css，如下所示：

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

Have a look at this JSFiddle

Answer 2

试试这个？

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>

元素不会改变颜色

2 个答案: