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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$( 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);
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System

Questions / Comments: