<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <div class="demo-container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu profile-dropdown" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li> <div class="row"> <div class="col-md-4 text-info font-sizer-label"> <i class="fas fa-font"></i> <span>Text Size</span> </div> <div class="col-md-8"> <div class="btn btn-default btn-no-border font-size-btn pull-left"> <i class="fas fa-minus"></i> </div> <input type="text" class="font-text-input " value="12px"/> <div class="btn btn-default font-size-btn btn-no-border pull-right"> <i class="fas fa-plus"></i> </div> </div> </div> </li> <li role="separator" class="divider"></li> <li> <a href="#">Separated link</a></li> </ul> </div> </div>

.text-size-input { color: #000; width: 50px; } .profile-dropdown { width: 300px; } .demo-container{ padding: 10em; } .font-text-input, font-text-input:focus{ border: 0; text-align:center; width: 55%; } .font-sizer-label{ padding-left: 1.5em; } .font-size-btn{ border-top: 0; border-bottom: 0; width: 3em; height: 2.2em; margin-top: -0.4em; margin-bottom: -0.7em; border-radius: 0; } .font-size-plus-btn{ border-left: 1 solid #e2e2e2; } .font-size-minus-btn{ border-right: 1 solid #e2e2e2; }

$(document).on('click', '.font-size-btn', function (e) { e.stopPropagation(); }); $(document).on('click', '.font-text-input', function (e) { e.stopPropagation(); }); function incrementFontSize(add){ var currentFontSizeValue = $('.font-text-input').val(); var currentFontSize = parseInt(currentFontSizeValue.replace("px", '')); currentFontSize += add; var newFontSize = currentFontSize + "px"; $('body').css('font-size', newFontSize); $('.font-text-input').val(newFontSize); } $('.font-size-plus-btn').click(function(){ incrementFontSize(1); }); $('.font-size-minus-btn').click(function(){ incrementFontSize(-1); });