jquery+css实现车牌号码输入键盘效果代码-html代码-BFW代码库

jquery+css实现车牌号码输入键盘效果代码

代码语言：html

所属分类：其他

代码描述：jquery+css实现车牌号码输入键盘效果代码，适合手机及电脑端车牌输入。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="cleartype" content="on" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        * {
	padding:0;
	margin:0;
}
.carcodeBox {
	display:none;
	flex-direction:column;
	position:fixed;
	bottom:0;
	width:100%;
	box-sizing:border-box;
	background:rgba(209,213,219,1);
	border-radius:5px 5px 0 0;
	box-shadow:5px 5px 10px #9e9e9e;
}
.carcodeBox-top-line {
	display:flex;
	justify-content:space-between;
	padding-top:10px;
}
.car-code-finish {
	display:inline-block;
	width:50px;
	height:36px;
	line-height:36px;
	padding:0 10px;
	margin-right:8px;
	text-align:center;
	color:#fff;
	background:#007fff;
	border-radius:5px;
	box-shadow:2px 2px 3px #979797;
}
.carLicenseMain {
	display:flex;
	justify-content:center;
}
.carcodeBox ul {
	overflow:auto;
	padding:0;
	margin:0;
}
.carcodeBox ul li {
	list-style:none;
}
.carLicenseMain ul {
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}
.carLicenseMain ul li {
	width:36px;
	height:36px;
	box-sizing:border-box;
	border:1px solid #ccc;
	display:inline-block;
	line-height:36px;
	font-size:18px;
	color:#000;
	text-align:center;
	margin-left:5px;
	background:#fff;
	border-radius:5px;
}
.carLicenseMain ul li:nth-last-child(1) {
	border:2px dashed #00b520;
}
.carLicenseMain ul li.active {
	border:1px solid #007fff;
	color:#007fff;
}
.keyboardBox {
	width:100%;
.........完整代码请登录后点击上方下载按钮下载查看