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>

Tengo estos tabs creados, y cuando esta activo uno tiene un pequeño border con puntas redondeadas arriba y abajo el .tab-system tiene un border que ocupa todo el 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>

La pregunta es: Cuando tengo seleccionado el primer tab por ejemplo como pueo hacer para que el border inferior del .tab-system de ese cacho no se vea, como la imagen que os pongo a continuacion donde el escogido es active y el border inferrior no se ve y en los demas si

introducir la descripción de la imagen aquí

2 respuestas 2

1

Yo lo haría con el pseudoelemento :after, asignándole dimensiones y con posicionamiento relativo para «subirlo» ese píxel que no se logra fácilmente con el método del borde en el contenedor. Por último, un z-index inferior para tener en «por encima» el estilo que aplicamos a los botones. Esta idea puede ser mejorada, pero considero que se entiende el concepto.

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

0

la clase active no debe tener el border-bottom que le has puesto. Es decir:

Despues de:

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

Tienes que poner esto:

.tab-system button.active {
    border-bottom: 0px !important;
}
3
  • Gracias por el aporte, pero aun poniendo border-bottom:0px !important; se sigue viendo el border del container en ese trozo
    – Caldeiro
    Commented el 3 ene. 2019 a las 12:29
  • @Caldeiro prueba a quitar !important de la regla de CSS aplicada para ambos.
    – cooper
    Commented el 3 ene. 2019 a las 12:50
  • Tampoco me funciona se sigue viendo ..
    – Caldeiro
    Commented el 4 ene. 2019 a las 9:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.