CSS伪类:placeholder-shown实践

CSS伪类:placeholder-shown在<input>或<textarea>元素显 placeholder text时生效。例如：通过:not(:placeholder-shown)来实现当用户输入搜索按钮高亮等

<form action="#" id="search-form" target="_blank">
    <input class="txt" name="kw" placeholder="请输入关键词~">
    <a href="javascript:;" class="searchBtn"></a>
</form>

#search-form{
	width:178px;
	height:28px;
	border-radius:28px;
	border:1px solid #aaa;
    position:relative;
}

#search-form:focus-within{
    border-color:#0cacff;
}

.txt{
	margin:4px 0 0 16px;
	width:130px;
	border:none;
}

.txt:-webkit-autofill {
    -webkit-box-shadow:0 0 0 30px #fff inset;/*框的背景色*/
    -webkit-text-fill-color:#333;/*框内的文字颜色*/
}

.txt:not(:placeholder-shown) ~ .searchBtn::after{
    background-position: 0 -282px;
}

.searchBtn{
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	width:36px;
	display:flex;
	justify-content: center;
	align-items: center;
}

.searchBtn::after{
    content:'';
    background:url(../images/icon.png) no-repeat;
    width:18px;
    height:18px;
    background-position: 0 -260px;
}