Olaleye Olalekan Oladipo bishoplee

CSS Radio Buttons

A simple and elegant CSS radio button

So so very very basic custom select.

Hey guys ! A version of Codepen on mobile phone ! This is not a GIF, (expect images), fully responsive and made with animejs !

Here are the link of the visible pens :

	<div include="form-input-select()">
	<select required>
	<!--
	This is how we can do "placeholder" options.
	note: "required" attribute is on the select
	-->
	<option value=""
	hidden
	>Example Placeholder</option>

	<!-- particles.js container -->
	<div id="particles-js"></div>

	<!-- stats - count particles -->
	<div class="count-particles">
	<span class="js-count-particles">--</span> particles
	</div>

	<!-- particles.js lib (JavaScript CodePen settings): https://github.com/VincentGarreau/particles.js -->

	<div class="nav">
	<div class="bar right index0">
	<div class="cover cover1"></div>
	<div class="cover cover2"></div>
	</div>
	<div class="options index0">
	<div class="option">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40"><g transform="translate(0 -1.165)"><path d="M95.8 61.8l-6.1-22.3c-.7-4-2.6-7.6-5.5-10.5-3.7-3.7-8.7-5.8-14-5.8-3.2 0-6.4.8-9.2 2.2-.3.1-.5.2-.7.2H40.8c-.2 0-.5-.1-.7-.2-2.8-1.5-6-2.2-9.2-2.2-5.3 0-10.2 2-14 5.8-2.8 2.8-4.7 6.5-5.5 10.5l-6 22.3c-1.8 6.4 1.3 13.2 7.4 16l2 .9c1.7.8 3.5 1.2 5.4 1.2 3.9 0 7.5-1.7 9.9-4.7l8-9.7c1.8-2.2 4.4-3.4 7.2-3.4h10.6c2.8 0 5.5 1.2 7.2 3.4l8 9.7c2.4 3 6 4.7 9.9 4.7 1.9 0 3.7-.4 5.4-1.2l2-.9c6.1-2.8 9.2-9.6 7.4-16zm-10.3 9.6l-2 .9c-2.4 1.1-5.3.4-6.9-1.6l-8-9.7c-3.1-3.8-7.7-6-12.7-6H45.3c-4.9 0-9.5 2.2-12.7 6l-8 9.7c-1.6 2-4.5 2.7-6.9 1.6l-2-.9c-2.9-1.3-4.4-4.7-3.6-7.8l6.1-22.4.1-.3c.5-2.6 1.7-5 3.5-6.9 2.4-2.4 5.6-3.7 9-3.7 2.1 0 4.1.5 5.9 1.4 1.3.7 2.6 1 4 1h19.6c1.3 0 2.7-.3 4-1 1.8-.9 3.8-1.4 5.9-1.

	<!--
	Don't use the "5-unsafe" CDN version in your own code. It will break on you.
	Instead go to videojs.com and copy the CDN urls for the latest version.
	-->

	<div id="instructions">

	<video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px"
	controls preload="none" poster='http://video-js.zencoder.com/oceans-clip.jpg'
	data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>

	<div class="buttons-container">
	<ul>
	<li class="active"><a href="#" class="active-text"><i class="fa fa-codepen" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-coffee" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-rocket" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i></a></li>
	</ul>
	</div>

	<div class="created-by">

	<div class="container">
	<span class="fab fa-linkedin"></span>
	<div class="line">
	<div class="inner"></div>
	</div>
	</div>

	<div class="card">
	<h2>Radio Buttons</h2>

	<ul>
	<li>
	<input type="radio" name="name" id="one" checked />
	<label for="one">Option #1</label>

	<div class="check"></div>
	</li>