Home > Net >  Each tabs different color
Each tabs different color

Time：09-22

I have three tabs with earch tabs under content on my page using the html css. Currently all the tabs are of the same color. I have tried but didnt get the solution, I want each tab to be of a different color when clicked and I would like to drop arrow on selected tab Please check the code, thanks in advance much appreciated

.tab-wrap {
    -webkit-transition: 0.3s box-shadow ease;
    transition: 0.3s box-shadow ease;
    max-width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    position: relative;
    list-style: none;
    background-color: #fff;
    margin: 40px 0;
}

.tab-sii {
    display: none;
}
    

.tab-sii:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 1;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 1;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab:first-of-type:not(:last-of-type)   label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.tab-sii:not(:first-of-type):not(:last-of-type)   label {
  border-radius: 0;
}
.tab-sii:last-of-type:not(:first-of-type)   label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.tab-sii:checked   label {
    background-color: #8C0052;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

.tab-sii .tab-sii-1:checked   label {
    background-color: #009297!important;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

.tab-sii .tab-sii-2:checked   label {
    background-color: #ffc20e!important;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

.tab-sii:checked   label:hover {
    box-shadow: 0 -1px 0 #fff inset;
    background-color: #8C0052;
}
.tab-sii   label {
    width: 100%;
    box-shadow: 0 -1px 0 #eee inset;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: #333;
    -webkit-box-flex: 3;
    -webkit-flex-grow: 3;
    -ms-flex-positive: 3;
    flex-grow: 3;
    text-align: center;
    background-color: #EAF6F6;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
    transition: 0.3s background-color ease, 0.3s box-shadow ease;
    height: 50px;
    box-sizing: border-box;
    padding: 15px;
    color: #000000;
    font-size: 22px;
}
<div data-persist="true" class="tab-wrap">      
            <input type="radio" id="tab1" name="tabGroup1" class="tab-sii one" checked>
            <label for="tab1">LEARN</label>
            <input type="radio" id="tab2" name="tabGroup1" class="tab-sii second">
            <label for="tab2">THRIVE</label>
            <input type="radio" id="tab3" name="tabGroup1" class="tab-sii third">
            <label for="tab3">EXPLORE</label>

            <div class="tab__content">
      <p>Content</p>
      <div>
      
       <div>

CodePudding user response：

You can try this to change set the color of each tab :

.tab-sii:checked   label[for="tab2"] {
   background-color: orange;
}

For the arrow, I don't really understand what you want ...

So it makes that :

.tab-wrap {
    -webkit-transition: 0.3s box-shadow ease;
    transition: 0.3s box-shadow ease;
    max-width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    position: relative;
    list-style: none;
    background-color: #fff;
    margin: 40px 0;
}

.tab-sii {
    display: none;
}

.tab-sii:checked   label[for="tab1"] {
       background-color: orange;
}

.tab-sii:checked   label[for="tab2"] {
       background-color: blue;
}

.tab-sii:checked   label[for="tab3"] {
       background-color: green;
}
    

.tab-sii:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 1;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 1;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab:first-of-type:not(:last-of-type)   label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.tab-sii:not(:first-of-type):not(:last-of-type)   label {
  border-radius: 0;
}
.tab-sii:last-of-type:not(:first-of-type)   label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.tab-sii:checked   label {
    background-color: #8C0052;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

.tab-sii .tab-sii-1:checked   label {
    background-color: #009297!important;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

.tab-sii .tab-sii-2:checked   label {
    background-color: #ffc20e!important;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

.tab-sii   label {
    width: 100%;
    box-shadow: 0 -1px 0 #eee inset;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: #333;
    -webkit-box-flex: 3;
    -webkit-flex-grow: 3;
    -ms-flex-positive: 3;
    flex-grow: 3;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
    transition: 0.3s background-color ease, 0.3s box-shadow ease;
    height: 50px;
    box-sizing: border-box;
    padding: 15px;
    color: #000000;
    font-size: 22px;
}
<div data-persist="true" class="tab-wrap">      
            <input type="radio" id="tab1" name="tabGroup1" class="tab-sii one" checked>
            <label for="tab1">LEARN</label>
            <input type="radio" id="tab2" name="tabGroup1" class="tab-sii second">
            <label for="tab2">THRIVE</label>
            <input type="radio" id="tab3" name="tabGroup1" class="tab-sii third">
            <label for="tab3">EXPLORE</label>

            <div class="tab__content">
      <p>Content</p>
      <div>
      
       <div>

CodePudding user response：

You can select the label based on :checked property of the radio button

just like this input#tab1:checked label

.tab-wrap {
    -webkit-transition: 0.3s box-shadow ease;
    transition: 0.3s box-shadow ease;
    max-width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    position: relative;
    list-style: none;
    background-color: #fff;
    margin: 40px 0;
}

.tab-sii {
    display: none;
}
    

.tab-sii:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 1;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 1;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab:first-of-type:not(:last-of-type)   label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.tab-sii:not(:first-of-type):not(:last-of-type)   label {
  border-radius: 0;
}
.tab-sii:last-of-type:not(:first-of-type)   label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.tab-sii:checked   label {
    background-color: #8C0052;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

.tab-sii .tab-sii-1:checked   label {
    background-color: #009297!important;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

.tab-sii .tab-sii-2:checked   label {
    background-color: #ffc20e!important;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

.tab-sii:checked   label:hover {
    box-shadow: 0 -1px 0 #fff inset;
    background-color: #8C0052;
}
.tab-sii   label {
    width: 100%;
    box-shadow: 0 -1px 0 #eee inset;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: #333;
    -webkit-box-flex: 3;
    -webkit-flex-grow: 3;
    -ms-flex-positive: 3;
    flex-grow: 3;
    text-align: center;
    background-color: #EAF6F6;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
    transition: 0.3s background-color ease, 0.3s box-shadow ease;
    height: 50px;
    box-sizing: border-box;
    padding: 15px;
    color: #000000;
    font-size: 22px;
}
.tab-wrap label {
  position: relative;
}
.tab-wrap label::after {content: '';
    position: absolute;
    right: 5px;
    top: 5px;
    width: 30px;
    height: 100%;
    background: url('https://png2.cleanpng.com/sh/1c5ded0c5c6e243af5a9f7cb8f9964f8/L0KzQYm3UsA0N6NsiZH0aYP2gLBuTfFzepD8ReVEbXLyfH7wgB9vNZV0j9C2YYL1f8i0kP5oNaFue58AYUe4Rra5VckyamhnUZC6NUO1Rom9UsE2OWg7TKc8NEm4SYeCTwBvbz==/kisspng-arrow-symbol-icon-down-arrow-png-pic-5a756e2591b7b9.1532686215176453495969.png') no-repeat center;
  background-size: contain;
  opacity: 0;
  transition: .3s ease all;
  }
input#tab1:checked   label{background: green;}
input#tab2:checked   label{background: orange;}
input#tab3:checked   label{background: 8C0052;}
.tab-wrap input:checked   label::after {opacity: 1;}
<div data-persist="true" class="tab-wrap">      
            <input type="radio" id="tab1" name="tabGroup1" class="tab-sii one" checked>
            <label for="tab1">LEARN</label>
            <input type="radio" id="tab2" name="tabGroup1" class="tab-sii second">
            <label for="tab2">THRIVE</label>
            <input type="radio" id="tab3" name="tabGroup1" class="tab-sii third">
            <label for="tab3">EXPLORE</label>

            <div class="tab__content">
      <p>Content</p>
      <div>
      
       <div>

Also added a dummy dropdown arrow for you to know how the flow works, it will appear only for active elements.

Page link：https//www.codepudding.com/net/122970.html

Prev:meta tags shows in <body> While Should be placed in the <head>
Next:Vue - Disable button when item is added to cart. Enable when it's removed
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding