样式:
代码:
.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;
}