css美化number类型输入框美化实现自定义+、-号点击按钮增减效果

发布时间:2020-09-10 04:13:41 作者:小旭依然
来源:网络 阅读:1380
<!DOCTYPE html>
<html lang="en">
		
<head>
  <meta charset="utf-8" />
  <title>Jay Skript And The Domsters</title>
 <style type="text/css">
 *{border:none;margin:0px;padding:0px;}
.number{ padding: 36px 0 28px;width:400px;margin:auto}
.mui-numbox{ display: inline-block;}
.minus{width: 30px; height: 30px; text-align: center;border: solid 1px #eaeaea; background: #f5f5f5; color: #9e9e9e;} 
.numbox{border-top: solid 1px #eaeaea; border-bottom: solid 1px #eaeaea; height: 28px; width:60px; color: #333333; margin-left:-8px; text-align: center; background: transparent;}
.numbox::textfield-decoration-container {
   
}
.numbox::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
.numbox::-webkit-outer-spin-button {
     -webkit-appearance: none;	/* 有无看不出差别 */
}
.plus { margin-left: -8px;}
 </style>
</head>
<body >
	<div class="number">
											购买数量:
				<div class="mui-numbox">
					<button class="minus" type="button" onclick="opera('val', false);">-</button>
					<input class="numbox" type="number" id="val" value="0"/>
					<button class="minus plus" type="button" onclick="opera('val', true);">+</button>
					人次
				</div>
	
		<script type="text/javascript">
	function opera(x, y) {
		var rs = new Number(document.getElementById(x).value);
		
		if (y) {
			document.getElementById(x).value = rs + 1;
		} else if( rs >0) {
			document.getElementById(x).value = rs - 1;
		}
		
	}
</script> 
</body>
</html>

效果预览:

css美化number类型输入框美化实现自定义+、-号点击按钮增减效果

推荐阅读:
  1. CSS 美化
  2. CSS3如何美化字符

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css js

上一篇:javascript使用canvas实现饼状图效果

下一篇:C#合并多种格式文件为PDF的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》