Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html

Created Oct 20, 2019
Embed
What would you like to do?
Input Radio
<div class="cntr">
<label for="rdo-1" class="btn-radio">
<input type="radio" id="rdo-1" name="radio-grp">
<svg width="20px" height="20px" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="9"></circle>
<path d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z" class="inner"></path>
<path d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z" class="outer"></path>
</svg>
<span>Option One</span>
</label>
<label for="rdo-2" class="btn-radio">
<input type="radio" id="rdo-2" name="radio-grp">
<svg width="20px" height="20px" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="9"></circle>
<path d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z" class="inner"></path>
<path d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z" class="outer"></path>
</svg>
<span>Option Two</span>
</label>
<label for="rdo-3" class="btn-radio">
<input type="radio" id="rdo-3" name="radio-grp">
<svg width="20px" height="20px" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="9"></circle>
<path d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z" class="inner"></path>
<path d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z" class="outer"></path>
</svg>
<span>Option Three</span>
</label>
</div>
html, body
height: 100%
display: grid
body
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif
font-weight: 400
-webkit-font-smoothing: antialiased
color: #222
.cntr
margin: auto
.btn-radio
cursor: pointer
display: inline-block
float: left
-webkit-user-select: none
user-select: none
&:not(:first-child)
margin-left: 20px
@media screen and (max-width: 480px)
display: block
float: none
&:not(:first-child)
margin-left: 0
margin-top: 15px
svg
fill: none
vertical-align: middle
circle
stroke-width: 2
stroke: #C8CCD4
path
stroke: #008FFF
&.inner
stroke-width: 6
stroke-dasharray: 19
stroke-dashoffset: 19
&.outer
stroke-width: 2
stroke-dasharray: 57
stroke-dashoffset: 57
input
display: none
&:checked + svg
path
transition: all .4s ease
&.inner
stroke-dashoffset: 38
transition-delay: .3s
&.outer
stroke-dashoffset: 0
span
display: inline-block
vertical-align: middle
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.