效果如下图:
style.css样式代码:
.input { padding: 5px; margin: 0; border: 1px solid #beceeb; }
.clear { display:none; position: absolute; width: 16px; height: 16px; margin: 5px 0 0 -16px; outline: none; }
.input::-ms-clear { display: none; }
.input:valid + .clear { display: inline; }
test.html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>..</title>
<link href="style.css" type="text/css" rel="stylesheet">
<!--<script src="jquery-2.2.1.min.js"></script>-->
</head>
<body >
输入任意内容:<input type="text" class="input" id="input" required><a href="javascript:;" class="clear"
οnclick="document.getElementById('input').value=''">×</a>
</body>
</html>