溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css美化number類型輸入框美化實現(xiàn)自定義+、-號點擊按鈕增減效果

發(fā)布時間：2020-09-10 04:13:41 來源：網(wǎng)絡(luò) 閱讀：1379 作者：小旭依然 欄目：開發(fā)技術(shù) 
<!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">
											購買數(shù)量:
				<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>

效果預(yù)覽：

css美化number類型輸入框美化實現(xiàn)自定義+、-號點擊按鈕增減效果

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手