master

分支 (2)

管理

管理

master

dev_test

web-test
/
纯CSS实现带小三角的提示框.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>提示框</title>
		<style type="text/css">
			.tips {
				width: 180px;
				border: 1px solid #808080;
				margin-top: 7px;
				padding: 7px;
				position: relative;
				font-size: 0.8rem;
				display: none;
			}

			.triangle em {
				position: absolute;
				width: 0px;
				height: 0px;
				border: 10px dashed #808080;
				border-color: transparent transparent #808080 transparent;
				left: 10px;
				top: -20px;
			}

			.triangle span {
				position: absolute;
				width: 0px;
				height: 0px;
				border: 10px dashed #808080;
				border-color: transparent transparent white transparent;
				left: 10px;
				top: -19px;
			}
		</style>
		<script type="text/javascript">
			function showTips() {
				var tooltip = document.getElementsByClassName('tips')[0];
				tooltip.style.display = 'block';
			}

			function hideTips() {
				var tooltip = document.getElementsByClassName('tips')[0];
				tooltip.style.display = 'none';
			}
		</script>
	</head>
	<body>
		<div>
			<input placeholder='请输入文字' onfocus="showTips();" onblur="hideTips();" />
			<div class='tips'>
				<div class="triangle"><em></em><span></span></div>
				只能输入小写字母、数字、下划线，不允许其他字符
			</div>
		</div>
	</body>
</html>