<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <section> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <hgroup> <h2> Subscribe for <div class="dropdown frecuency"> <input type="text" id="frecuency" value="0" /> <span class="dropdown-toggle" type="button" data-toggle="dropdown"> weekly <span class="caret"></span> </span> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-val="0"> daily <span class="glyphicon glyphicon-ok"></span> </a></li> <li class="selected" role="presentation"><a role="menuitem" tabindex="-1" href="#" data-val="1"> weekly <span class="glyphicon glyphicon-ok"></span> </a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-val="2"> monthly <span class="glyphicon glyphicon-ok"></span> </a></li> </ul> </div> newsletter </h2> <h1 class="free">For Free</h1> </hgroup> <div class="well"> <form action="#"> <div class="input-group"> <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required> <button class="btn btn-info btn-lg" type="submit">Submit</button> </div> </form> </div> <small class="promise"><em>We won't never send spam.</em></small> </div> </div> </div> </section>

section { padding: 100px 0; text-align: center; } .frecuency { display: inline-block; border: none; font-style: italic; background-color: transparent; cursor: pointer; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform .35s ease-in; transition: -webkit-transform .35s ease-in; border-bottom: none; padding-bottom: 2px; } .frecuency > input { display: none; } .frecuency:focus, .frecuency.open { outline: none; border-bottom: 5px solid #39b3d7; -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform .35s ease-in; transition: -webkit-transform .35s ease-in; } .frecuency .dropdown-menu { margin-top: 10px; border-radius: 0px; text-align: left; min-width: 100px; } .frecuency .dropdown-menu > li > a { position: relative; display: block; width: 100%; font-family: inherit; font-size: 20px; font-weight: 500; line-height: 1.1; color: inherit; padding-right: 30px; } .frecuency .dropdown-menu > li > a > .glyphicon { display: none; position: absolute; top: 50%; right: 5px; margin-top: -7.5px; font-size: 15px; } .frecuency .dropdown-menu > li.selected > a > .glyphicon { display: inline-block; } .free { text-transform: uppercase; } .input-group { margin: 20px auto; width: 100%; } input.btn.btn-lg { width: 60%; height: 60px; border-top-right-radius: 0; border-bottom-right-radius: 0; } button.btn { width: 40%; height: 60px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .promise { color: #999; }

$(function () { $('.frecuency .dropdown-menu > li > a').on('click', function(event) { var $control = $(this).closest('.dropdown'), caret = '<span class="caret"></span>'; $control.find('input').val($(this).data('val')); $control.find('.dropdown-toggle').html($(this).text() + caret); $control.find('.dropdown-menu > li.selected').removeClass('selected'); $(this).closest('li').addClass('selected'); }); });