"Script"
Bootstrap 4.1.1 Snippet by sachinkul6185@gmail.com

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>MyFlightSearch Travel Affiliate Program</title> <meta name="description" content="Join MyFlightSearch affiliate program and build your own business. Enjoy big earnings with every booking. Sign up now to be a part of the best travel affiliate program. " /> <!-- Bootstrap --> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="count-box"> <div class="count-box-in"> <ul> <li> <div class="label-text">Adult<span> ( 18+ yrs )</span></div> <div class="adult_val adult-range"> <button id="aminus" class="dec-value">-</button> <span class="value-val"><input type="text" id="adult-cunt" class="text-style" name="adult-count" readonly value="1"></span> <button id="aplus" class="inc-value">+</button> </div> </li> <li> <div class="label-text">Minor<span> ( 12-17 yrs )</span></div> <div class="adult_val adult-range"> <button id="mminus" class="dec-value">-</button> <span class="value-val"><input type="text" id="minor-cunt" class="text-style" name="adult-count" readonly value="2"></span> <button id="mplus" class="inc-value">+</button> </div> </li> <li> <div class="label-text">Child<span> ( 2-11 yrs )</span></div> <div class="adult_val adult-range"> <button id="cminus" class="dec-value">-</button> <span class="value-val"><input type="text" id="child-cunt" class="text-style" name="adult-count" readonly value="0"></span> <button id="cplus" class="inc-value">+</button> </div> </li> <li> <div class="label-text">Infant<span> ( Under 2 yrs )</span></div> <div class="adult_val adult-range"> <button id="iminus" class="dec-value">-</button> <span class="value-val"><input type="text" id="infant-cunt" class="text-style" name="adult-count" readonly value="0"></span> <button id="iplus" class="inc-value">+</button> </div> </li> <li> <div class="label-text">Infant on Top<span> ( Under 2 yrs )</span></div> <div class="adult_val adult-range"> <button id="itminus" class="dec-value">-</button> <span class="value-val"><input type="text" id="infant-on-top-cunt" class="text-style" name="adult-count" readonly value="2"></span> <button id="itplus" class="inc-value">+</button> </div> </li><li> <div class="label-text">Senior<span> ( 65+ yrs )</span></div> <div class="adult_val adult-range"> <button id="sminus" class="dec-value">-</button> <span class="value-val"><input type="text" id="senior-cunt" class="text-style" name="adult-count" readonly value="0"></span> <button id="splus" class="inc-value">+</button> </div> </li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
body{background:#999;} .count-box{width:265px; margin:20px auto;} .count-box ul{margin:0px;padding:0px;list-style:none;} .count-box ul li{border-bottom:1px solid #dfdfdf;line-height:41px;display:block;float: left;width: 100%;} .count-box ul li:last-child{border:none;} .count-box ul li .label-text{width:65%;float:left;font-size:11px;font-weight:300; font-family:"Open Sans";color:#474747;text-transform:uppercase} .count-box ul li .label-text span{font-size:11px;font-weight:300; font-family:"Open Sans";color:#aeaeae;text-transform:lowercase;} .count-box ul li .adult-range{width:35%;float:right;position:relative;right: -5px;} .count-box ul li .adult-range .dec-value{background-image: url(../images/minus.png);background-position: 7px 11px;width: 24px;background-color: transparent;border:none;background-repeat: no-repeat;display:inline-block;height: 25px;margin: 0;padding: 0;vertical-align: middle;} .count-box ul li .adult-range .inc-value{background-image: url(../images/plus.png);background-position: 11px 19px;width: 30px;background-color: transparent;border:none;background-repeat: no-repeat;display:inline-block;background-position: 7px 6px;width: 24px;background-color: transparent;border: none;background-repeat: no-repeat;display: inline-block;height: 25px;margin: 0;padding: 0;vertical-align: middle;} .count-box ul li .adult-range .dec-value:focus{border:none;outline:none;} .count-box ul li .adult-range .inc-value:focus{border:none;outline:none;} .count-box ul li .adult-range input:focus{border:none;outline:none;} .count-box ul li .adult-range .value-val{display:inline-block;width: 25px;text-align: center;} .count-box ul li .adult-range .value-val input{width:100%;text-align: center;border: none;line-height:20px;font-size:16px;} .count-box-in{width:100%;float:left;padding:0 15px;border:1px solid #dfdfdf;box-shadow:5px 5px 8px #888; background:#fff;position:relative;} .count-box-in:before{content:"";position:absolute;left: 13px;top: -20px;border: 10px solid transparent;border-bottom: 10px solid #fff;}
$( document ).ready(function() { $('.adult_val .inc-value').click(function() { $(this).parent().find('input[type="text"]').removeClass('more'); var x = $(this).parent().find('input[type="text"]').val(); x++; if (x > 8) { $(this).parent().find('input[type="text"]').addClass('more'); } else { $(this).parent().find('input[type="text"]').val(x); } }); $('.adult_val .dec-value').click(function() { $(this).parent().find('input[type="text"]').removeClass('more'); var x = $(this).parent().find('input[type="text"]').val(); x--; if (x < 0) { $(this).parent().find('input[type="text"]').addClass('more'); } else { $(this).parent().find('input[type="text"]').val(x); } }); });

Related: See More

Bootstrap Wizard

Questions / Comments: