Radio-Style Selector

Developer
Kyle Lavery
Size
3,153 Kb
Views
32,384
  1. Radio-Style Selector Previews
  2. Radio-Style Selector HTML Codes
  3. Radio-Style Selector CSS Codes
  4. Radio-Style Selector JS Codes

How do I make an radio-style selector?

Year selector with some cool css. What is a radio-style selector? How do you make a radio-style selector? This script and codes were developed by Kyle Lavery on 26 August 2022, Friday.

Radio-Style Selector Previews
IQ Test

Radio-Style Selector - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Radio-Style Selector</title> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="year current">2016</div> <div class="year">2015</div> <div class="year">2014</div> <div class="year">2013</div> <div class="year">2012</div> <div class="slider"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Radio-Style Selector - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: Roboto; background: #E9E9E9;
}
.container { display: block; background: #FFF; width: 90%; margin: 20px auto; border-top: 2px solid #0179C6; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); overflow: hidden; position: relative; font-size: 0; text-align: center; white-space: nowrap;
}
.container:hover > .current { color: #000 !important;
}
.container .slider { position: absolute; top: 0; left: 0; background: #0179C6; height: 100%; width: 20%; font-size: 1.2rem; min-width: 4.25em; z-index: 3; transition: .3s;
}
.year { width: 20%; min-width: 4.25em; font-size: 1.2rem; display: inline-block; padding: .75em 1em; cursor: pointer; position: relative; z-index: 5; transition: .3s;
}
.year:nth-child(1).current ~ .slider { transform: translateX(0);
}
.year:nth-child(2).current ~ .slider { transform: translateX(100%);
}
.year:nth-child(3).current ~ .slider { transform: translateX(200%);
}
.year:nth-child(4).current ~ .slider { transform: translateX(300%);
}
.year:nth-child(5).current ~ .slider { transform: translateX(400%);
}
.year:nth-child(1):hover ~ .slider { transform: translateX(0);
}
.year:nth-child(2):hover ~ .slider { transform: translateX(100%);
}
.year:nth-child(3):hover ~ .slider { transform: translateX(200%);
}
.year:nth-child(4):hover ~ .slider { transform: translateX(300%);
}
.year:nth-child(5):hover ~ .slider { transform: translateX(400%);
}
.year:hover { color: #FFF;
}
.year.current { color: #FFF;
}
.year.current:hover { color: #FFF !important;
}
@media (max-width: 667px) { .container { overflow-X: auto; } .container:hover .current { color: #FFF !important; } .year.current { background: #0179C6; } .year:not(.current):hover { color: #000; } .slider { display: none; }
}

Radio-Style Selector - Script Codes JS Codes

$(".year").on('click', function () { $(".year").removeClass("current"); $(this).addClass("current");
});
Radio-Style Selector - Script Codes
Radio-Style Selector - Script Codes
Home Page Home
Developer Kyle Lavery
Username koenigsegg1
Uploaded August 26, 2022
Rating 4
Size 3,153 Kb
Views 32,384
Do you need developer help for Radio-Style Selector?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Lavery (koenigsegg1) Script Codes
Name
Responsive Flex Layout With Tabs - Material Design
Error page
Header Navigation Menu
Minimal Material Design Form Input
View My Profile Animated FAB
CSS Design Awards Button In CSS
A Pen by Kyle Lavery
Dominant Color Lazy Loading
Gradient Shadows
Flexbox Google Play Music Website
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!