CSS only! Does anyone know how to trigger add an 8px radius to the top left of the .tab-content container only when tab 2, 3, or 4 are pressed and leave it without a radius when tab-1 is selected?
'border-top-left-radius: 8px;' is the code I need to execute, only when these mentioned tabs are selected and not the 1st tab.
I have tried many different approaches here relating to .tab-switch:checked and the same with .tab-content but cant get anything to fire.
:root {
--primary: #0062a4;
--primary_med: #5084a7;
--primary_dark: #24435c;
--light: #ffffff;
--dark: #000000;
--shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
}
.feedback {
box-sizing: border-box;
padding: 10px;
font-size: 12px;
border-radius: 10px;
background-image: linear-gradient(to bottom right, rgb(23, 62, 136), rgb(0, 140, 255));
border: 1px solid #000000;
box-shadow: 2px 4px 8px;
}
.tabs {
position: relative;
margin: 0;
}
.tabs::before,
.tabs::after {
content: "";
display: table;
}
.tabs::after {
clear: both;
}
.tab {
float: left;
Padding-top: 5px;
padding-left: 10px;
}
.tab-switch {
display: none;
}
.tab-label {
position: relative;
display: block;
height: 34px;
text-align: center;
background: var(--primary_dark);
color: #fff;
cursor: pointer;
padding: 5px 20px;
font-size: 14px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.tab-switch:checked .tab-label {
background: var(--primary_med);
color: var(--light);
border-bottom: 0;
z-index: 1;
top: -0.0625rem;
font-size: 16px;
font-weight: 700;
}
.tab-content {
height: 12rem;
position: absolute;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
z-index: 1;
top: 3.1em;
left: 0;
padding: 1.618rem;
background: var(--primary_med);
opacity: 0;
height: 422px;
width: 100%;
}
.tab-switch:checked label .tab-content {
z-index: 2;
opacity: 1;
}
.base-footer {
gap: 10px;
background-image: linear-gradient(to bottom right, rgb(23, 62, 136), rgb(0, 140, 255));
border-radius: 10px;
border: 1px solid #000000;
box-shadow: 2px 4px 8px;
}
<div >
<div >
<div >
<input type="radio" name="css-tabs" id="tab-1" checked >
<label for="tab-1" >Tab 1</label>
<div >Tab 1</div>
</div>
<div >
<input type="radio" name="css-tabs" id="tab-2" >
<label for="tab-2" >Tab 2</label>
<div >Tab 2</div>
</div>
<div >
<input type="radio" name="css-tabs" id="tab-3" >
<label for="tab-3" >Tab 3</label>
<div >Tab 3</div>
</div>
<div >
<input type="radio" name="css-tabs" id="tab-4" >
<label for="tab-4" >Tab 4</label>
<div >Tab 4</div>
</div>
</div>
</div>
I need a solution in CSS only please.
CodePudding user response:
You could use the :not selector - what you want to select are the tabs that are checked but are not the first-child (of the .tabs element).
:root {
--primary: #0062a4;
--primary_med: #5084a7;
--primary_dark: #24435c;
--light: #ffffff;
--dark: #000000;
--shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
}
.feedback {
box-sizing: border-box;
padding: 10px;
font-size: 12px;
border-radius: 10px;
background-image: linear-gradient(to bottom right, rgb(23, 62, 136), rgb(0, 140, 255));
border: 1px solid #000000;
box-shadow: 2px 4px 8px;
}
.tabs {
position: relative;
margin: 0;
}
.tabs::before,
.tabs::after {
content: "";
display: table;
}
.tabs::after {
clear: both;
}
.tab {
float: left;
Padding-top: 5px;
padding-left: 10px;
}
.tab-switch {
display: none;
}
.tab-label {
position: relative;
display: block;
height: 34px;
text-align: center;
background: var(--primary_dark);
color: #fff;
cursor: pointer;
padding: 5px 20px;
font-size: 14px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.tab-switch:checked .tab-label {
background: var(--primary_med);
color: var(--light);
border-bottom: 0;
z-index: 1;
top: -0.0625rem;
font-size: 16px;
font-weight: 700;
}
.tab-content {
height: 12rem;
position: absolute;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
z-index: 1;
top: 3.1em;
left: 0;
padding: 1.618rem;
background: var(--primary_med);
opacity: 0;
height: 422px;
width: 100%;
}
.tab-switch:checked label .tab-content {
z-index: 2;
opacity: 1;
}
.tab:not(:first-child) .tab-switch:checked label .tab-content {
border-top-left-radius: 8px;
}
.base-footer {
gap: 10px;
background-image: linear-gradient(to bottom right, rgb(23, 62, 136), rgb(0, 140, 255));
border-radius: 10px;
border: 1px solid #000000;
box-shadow: 2px 4px 8px;
}
<div >
<div >
<div >
<input type="radio" name="css-tabs" id="tab-1" checked >
<label for="tab-1" >Tab 1</label>
<div >Tab 1</div>
</div>
<div >
<input type="radio" name="css-tabs" id="tab-2" >
<label for="tab-2" >Tab 2</label>
<div >Tab 2</div>
</div>
<div >
<input type="radio" name="css-tabs" id="tab-3" >
<label for="tab-3" >Tab 3</label>
<div >Tab 3</div>
</div>
<div >
<input type="radio" name="css-tabs" id="tab-4" >
<label for="tab-4" >Tab 4</label>
<div >Tab 4</div>
</div>
</div>
</div>