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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css美化number类型输入框美化实现自定义+-号点击按钮增减效果相关的知识,希望对你有一定的参考价值。

<!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类型输入框美化实现自定义+-号点击按钮增减效果的主要内容,如果未能解决你的问题,请参考以下文章

14款CSS3炫酷表单input输入框美化效果附源码

uwp - ContentDialog - 自定义仿iphone提示框,提示框美化

HTML5中input背景提示文字(placeholder)的CSS美化

input单选框美化——自定义样式

input的placeholder美化

CSS滚动条实现步骤及美化小技巧