防input required属性的提示框 

<!doctype html>
<html>
<head>
	<meta charset = "utf-8">
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		/*******气泡************/
		.reminBox{
			width: 150px;
			height: 50px;	
			position: relative;
			top: 100px;
			left: 100px;
			background: #fff;
			border: 1px solid #808080;
			border-radius: 12px;
		}
		.reminBox:before{
			content: "";
			width: 0;
			height: 0;
			z-index: 1;
			position: absolute;
			top: -40px;
			left: 22px;
			border-top: 20px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 20px solid #fff;
			border-left: 10px solid transparent;
		}
		.reminBox:after{
			content: "";
			width: 0;
			height: 0;
			position: absolute;
			top: -40px;
			left: 20px;
			border-top: 20px solid transparent;
			border-right: 12px solid transparent;
			border-bottom: 20px solid #808080;
			border-left: 12px solid transparent;
		}
		/*******感叹号**********/
		.reminIcon{
			position: absolute;
			width: 26px;
			height: 26px;
			top: 12px;
			left: 12px;
			background: #ffa300;
		}
		.reminIcon:before{
			position: absolute;
			content: "";
			width: 4px;
			height: 13px;
			background: #fff;
			border: 1px solid #fff;
			border-radius: 2px 2px 50% 50%;
			top: 2px;
			right: 10px;
		}
		.reminIcon:after{
			position: absolute;
			content: "";
			width: 4px;
			height: 4px;
			background: #fff;
			border: 1px solid #fff;
			border-radius: 50%;
			top: 18px;
			right: 10px;
		}
		/*********文本********/
		.reminText{
			background: #fff;
			position: absolute;
			color: #000;
			left: 50px;	
			font-size: 12px;
			top: 16px;
		}
	</style>
</head>

<body>
	<script>
		//获取父元素
		let body = document.body;
		//创建元素
		let reminBox = document.createElement("div");
		let reminIcon = document.createElement("div");
		let reminText = document.createElement("div");
		//设置class
		reminBox.className = "reminBox";
		reminIcon.className = "reminIcon";
		reminText.className = "reminText";
		//设置从属关系
		body.append(reminBox);
		reminBox.append(reminIcon);
		reminBox.append(reminText);
		//设置文本
		reminText.innerText = "请填写此字段。";
	</script>
</body>

</html>

　结果：

posted @ 2018-04-13 14:01  web_小隆  阅读(1116)  评论(0)    收藏  举报