Html input 获取焦点时显示清除按钮

/**输入框文字清除按钮开始*/
.clearinput {
	margin: 0;
	padding: 5px;
}
.clear {
	display: none;
	position: absolute;
	width: 16px;
	height: 16px;
	margin: 6px 0 0 -20px;
	background: url(${pageContext.request.contextPath}/images/commons/clear.png) no-repeat;
	/* outline: none; */
}

.clearinput::-ms-clear {
	display: none;
}

.clearinput:focus:valid+.clear {
	display: inline;
}

<input class="clearinput" data-role="none" type="text" name="contactname" id="truename" placeholder="请输入联系人姓名" value="${pageBean.contactname }" required><a class="clear"></a>