<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class=""> <label><input type="radio" class="radio-inline" name="radios" value=""><span class="outside"><span class="inside"></span></span>Neopolitan</label> <label><input type="radio"class="radio-inline" name="radios" value=""><span class="outside"><span class="inside"></span></span>Mint Choco Chip</label> <label><input type="radio" class="radio-inline" name="radios" value=""><span class="outside"><span class="inside"></span></span>Blue Moon</label> <label><input type="radio" class="radio-inline" name="radios" value=""><span class="outside"><span class="inside"></span></span>All the Ice Cream</label> </div>

label { margin: 2em; display: inline-block; position: relative; padding-left: 40px; cursor: pointer; } input { height: 1px; width: 1px; opacity: 0; } .outside { display: inline-block; position: absolute; left: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; border: 2px solid red; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; background: none; } .inside { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; border-radius: 50%; width: 10px; height: 10px; background: red; left: 3px; top: 3px; -webkit-transform: scale(0, 0); transform: scale(0, 0); } .no-transforms .inside { left: auto; top: auto; width: 0; height: 0; } input { /* &:focus, &:active { + .outside { border-color: $almost-black; } }*/ } input:checked + .outside .inside { -webkit-animation: radio-select 0.1s linear; animation: radio-select 0.1s linear; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .no-transforms input:checked + .outside .inside { width: 10px; height: 10px; }