Question

materialite选项卡的默认颜色为粉红色。也是活动标签的下划线。我想自定义并添加一些样式。我该怎么做？

Answer 1

上述2张图片中的效果的CSS代码更改：

        .tabs .tab a{
            color:#000;
        } /*Black color to the text*/

        .tabs .tab a:hover {
            background-color:#eee;
            color:#000;
        } /*Text color on hover*/

        .tabs .tab a.active {
            background-color:#888;
            color:#000;
        } /*Background and text color when a tab is active*/

        .tabs .indicator {
            background-color:#000;
        } /*Color of underline*/

Answer 2

将自定义CSS添加到Materialize 1.0.0默认选项卡的最佳方法如下：

.tabs .tab a {
  color: rgba(38, 166, 154, 0.7);
  /*Custom Text Color*/
}

.tabs .tab a:hover {
  color:#26a69a;
  /*Custom Color On Hover*/
}

.tabs .tab a:focus.active {
  color:#26a69a;
  /*Custom Text Color While Active*/
  background-color: rgba(38, 166, 154, 0.2);
  /*Custom Background Color While Active*/
}

.tabs .indicator {
  background-color:#26a69a;
  /*Custom Color Of Indicator*/
}

*如果要保留框架的默认样式，请使用示例中的RGBA值。

Answer 3

很容易在物化中应用预定义的类。

请参阅页面：http://materializecss.com/color.html

在这里，我已经应用了teal lighten-2类，但是有各种各样的组合，您可以从中选择。此外，您可以编写自己的自定义类并应用它。

HTML：

<div class="row">
  <div class="col s12">
    <ul class="tabs teal lighten-2">
      <li class="tab col s3"><a href="#test1">Test 1</a></li>
      <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
      <li class="tab col s3"><a href="#test3">Test 3</a></li>
    </ul>
  </div>
  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>
  <div id="test3" class="col s12">Test 3</div>
  <div id="test4" class="col s12">Test 4</div>
</div>

JSFiddle：http://jsfiddle.net/nikdtu/doska9qe/

Answer 4

对于下划线颜色，请在<div class="indicator orange" style="z-index:1"></div>之前添加</ul>，对于文本颜色，请使用此<li class="tab col s3"><a href="#test1" class="teal-text">Test 1</a></li>

例如：

<ul class="tabs transparent" materialize="tabs">
  <li class="tab col s3">
    <a href="#test1" class="teal-text">Test 1</a>
  </li>
  <li class="tab col s3">
    <a href="#test2" class="teal-text">Test 2</a>
  </li>
  <div class="indicator teal" style="z-index:1"></div>
</ul>

更改选项卡文本的颜色和实体化框架中的下划线

4 个答案: