CSS：个人常用搜索框样式

样式：

代码：

<form method="post" action="search.jsp" name="search">
				<div class="search">
					<div class="search_box">
						<span class="searchicon"></span> <input type="search" name="tname"
							class="search_input" id="searchInput" placeholder="请输入你要搜索物品的名称">
					</div>
					<label class="search_label" id="searchText"> <input
						type="button" value="搜索" class="round_button blue" onclick="go()">
					</label>
				</div>
			</form>

.search {
	background-color: #F0EEEE;
	display: flex;
	padding: .5rem 1rem;
	position: relative;
}

.search_box {
	flex: 1;
	position: relative;
}

.searchicon {
	position: absolute;
	height: .5rem;
	width: .5rem;
	background: transparent;
	border: 2px solid #43b3e7;
	top: .5rem;
	left: .5rem;
	border-radius: 100%;
}

.searchicon:after {
	content: "";
	position: absolute;
	background: #43b3e7;
	height: 6px;
	width: 3px;
	bottom: -5px;
	right: -3px;
	transform: rotate(-45deg);
}

.search_box input {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-appearance: none;
	font-size: 1rem;
	height: 2.2rem;
	width: 100%;
	border-radius: 0.3rem;
	padding-left: 1.8rem;
}

.search_label {
	padding-left: 1rem;
	height: 2rem;
	line-height: 2rem;
	font-size: 1rem;
}

.round_button {
	border: 1px solid;
	font: bold 12px/25px Arial, sans-serif;
	text-align: center;
	font-size: 20px;
	width: 60px;
	height: 35px;
	border-radius: 15px;
}