Html
    Css
    Js

    
                        
.weui-search-bar {
	position:relative;
	padding:8px;
	display:flex;
	box-sizing:border-box;
	background-color:red;
	-webkit-text-size-adjust:100%;
	align-items:center;
}
.weui-search-bar.weui-search-bar_focusing .weui-search-bar__cancel-btn {
	display:block;
}
.weui-search-bar.weui-search-bar_focusing .weui-search-bar__label {
	display:none;
}
.weui-search-bar .weui-icon-search {
	width:16px;
	height:16px;
}
.weui-search-bar__form {
	position:relative;
	flex:auto;
	background-color:#FFFFFF;
	border-radius:4px;
}
.weui-search-bar__box {
	position:relative;
	padding-left:28px;
	padding-right:32px;
	height:100%;
	width:100%;
	box-sizing:border-box;
	z-index:1;
}
.weui-search-bar__box .weui-search-bar__input {
	padding:8px 0;
	width:100%;
	height:1.14285714em;
	border:0;
	font-size:14px;
	line-height:1.14285714em;
	box-sizing:content-box;
	background:transparent;
	caret-color:#006cff;
}
.weui-search-bar__box .weui-search-bar__input:focus {
	outline:none;
}
.weui-search-bar__box .weui-icon-search {
	position:absolute;
	top:50%;
	left:8px;
	margin-top:-8px;
}
.weui-search-bar__box .weui-icon-clear {
	position:absolute;
	top:50%;
	right:0;
	margin-top:-16px;
	padding:8px;
	width:16px;
	height:16px;
	mask-size:16px;
}
.weui-search-bar__label {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:2;
	font-size:0;
	border-radius:4px;
	line-height:32px;
	text-align:center;
	color:#999;
	background:#FFFFFF;
}
.weui-search-bar__label span {
	display:inline-block;
	font-size:14px;
	vertical-align:middle;
}
.weui-search-bar__label .weui-icon-search {
	margin-right:4px;
}
.weui-search-bar__cancel-btn {
	display:none;
	margin-left:8px;
	line-height:28px;
	color:yellow;
	white-space:nowrap;
}
.weui-search-bar__input:not(:valid) ~ .weui-icon-clear {
	display:none;
}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration {
	display:none;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jquery移动端搜索框

更新时间:2020-03-03 00:20:37

0