Style tabs with css

Question

Style tabs with css

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

<div class="tab-system">
    <button class="tablinks active" onclick="openTab(event, 'LogosSubidos')">Uploaded Logos</button>
    <button class="tablinks" onclick="openTab(event, 'LogosDescargados')">Downloaded Logos</button>
    <button class="tablinks" onclick="openTab(event, 'LogosVotados')">Voted Logos</button>
    <button class="tablinks" onclick="openTab(event, 'EditProfile')">Edit Profile</button>
</div>

I have these tabs created, and when it is active one has a small border with rounded tips up and down the .tab-system has a border that occupies all the width

/* Style the tab */
.tab-system {
  overflow: hidden;
  border-bottom: 1px solid #535353;
}

.tab-system button {
    background-color: inherit;               
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    color: #535353;
}
.tab-system button:hover,.tab-system button.active {
    background-color: #fff;
    color:#535353;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    border-top: 1px solid #535353;
    border-left:1px solid  #535353;
    border-right: 1px solid #535353;
    border-bottom: 1px solid #fff !important;
}


/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
}
</style>

The question is: When I have selected the first tab, for example, how can I make the lower border of the .tab-system of that chunk not visible, like the image that I put below where the chosen one is active and the border inferrior is not seen and in others if

html css3 css

asked by Caldeiro 03.01.2019 в 13:15

source

2 answers

Error With sublime text 3 My form does not work in Hosting

score 1 · Answer 1

I would do it with the pseudo-element :after , assigning dimensions and relative positioning to "upload" that pixel that is not easily achieved with the edge method in the container. Finally, a lower z-index to have "above" the style that we apply to the buttons. This idea can be improved, but I believe that the concept is understood.

.tab-system {
  overflow: hidden;
  /*border-bottom: 1px solid #535353;*/
}

.tab-system:after {
  background-color: black;
  content: '';
  display: block;
  height: 1px;
  position: relative;
  top: -1px;
  width: 100%;
  z-index: -1;
}

.tab-system button {
    background-color: inherit;               
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    color: #535353;
    border-top: 1px solid #fff;
    border-left:1px solid  #fff;
    border-right: 1px solid #fff;
}
.tab-system button:hover,.tab-system button.active {
    background-color: #fff;
    color:#535353;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    border-top: 1px solid #535353;
    border-left:1px solid  #535353;
    border-right: 1px solid #535353;
    border-bottom: 1px solid #fff;
}


/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
}

<div class="tab-system">
    <button class="tablinks active" onclick="openTab(event, 'LogosSubidos')">Uploaded Logos</button>
    <button class="tablinks" onclick="openTab(event, 'LogosDescargados')">Downloaded Logos</button>
    <button class="tablinks" onclick="openTab(event, 'LogosVotados')">Voted Logos</button>
    <button class="tablinks" onclick="openTab(event, 'EditProfile')">Edit Profile</button>
</div>

score 0 · Answer 2

the active class should not have the border-bottom that you have set. That is:

After:

.tab-system button:hover,.tab-system button.active {...}

You have to put this:

.tab-system button.active {
    border-bottom: 0px !important;
}