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

Question

具体化选项卡的默认颜色为粉红色。也是活动选项卡的下划线。我想定制它并添加一些样式。我怎么做？

原文由 Kruthika C S 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

图像：悬停时的 活动选项卡 和 Tab2

上述 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*/

原文由 Kruthika C S 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将自定义 CSS 添加到 Materialise 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 值。

原文由 Emmanouil Kafieris 发布，翻译遵循 CC BY-SA 4.0 许可协议