每个标签不同的颜色

Question

我使用 html css 在我的页面内容下设置了三个带有搜索选项卡的选项卡。目前所有的标签都是相同的颜色。我已经尝试但没有得到解决方案，我希望每个选项卡在单击时具有不同的颜色，我想在选定的选项卡上放置箭头请检查代码，在此先感谢非常感谢

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

Answer 1

您可以试试这个来更改设置每个选项卡的颜色：

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

对于箭头，我不是很明白你想要什么...

所以它使得：

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

每个标签不同的颜色

Each tabs different color

html

css

tabs