input[type="radio"] {
+
+input[type="radio"] {
left: -9999px;
position: absolute;
z-index: -1;
}
+
Then we give the corresponding label
elements a little spacing and breathing room:
+
label {
cursor: pointer;
padding: 10px 20px;
@@ -69,7 +84,9 @@
z-index: 2;
}
+
Remember that .slide-item
I referenced earlier? That element will be the visual “slider” that animates between the individual radio options. We style that like so:
+
.slide-item {
background: white;
border-radius: 9999px;
@@ -82,16 +99,20 @@
z-index: 0;
}
-You'll notice the left
, height
, and width
properties utilize the CSS calc
attributes – this just gives some much needed padding and visual clean-up to the whole tabbed interface.
+
+You’ll notice the left
, height
, and width
properties utilize the CSS calc
attributes – this just gives some much needed padding and visual clean-up to the whole tabbed interface.
+
For the finishing touches, we just need to tell the .slide-item
where to position itself based on which radio
input is currently selected:
-input[type="radio"]:nth-of-type(1):checked ~ .slide-item {
+
+input[type="radio"]:nth-of-type(1):checked ~ .slide-item {
left: 4px;
}
-input[type="radio"]:nth-of-type(3):checked ~ .slide-item {
+input[type="radio"]:nth-of-type(3):checked ~ .slide-item {
left: calc(66.66% + 4px);
}
-That's pretty much it! You now have a fully functional, animated toggle slider with just a set of simple radio
inputs and pure CSS.
+
+That’s pretty much it! You now have a fully functional, animated toggle slider with just a set of simple radio
inputs and pure CSS.