web-dev-qa-db-ja.com

マテリアライズフレームワークのタブテキストと下線の色を変更する

マテリアライズタブのデフォルトの色はピンクがかっています。また、アクティブなタブの下線。それをカスタマイズして、いくつかのスタイルを追加したいと思います。それ、どうやったら出来るの？

cssmaterialize
8
Kruthika C S

画像： アクティブタブ および ホバーのタブ2

上記の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*/
21
Kruthika C S

Materialize 1.0.0のデフォルトのタブにカスタムCSSを追加する最良の方法は次のとおりです。

.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値を使用します。

4
Emmanouil Kafieris