css简单搜索框

<article>
<div class="search">
<div class="search_box">
                <span class="searchicon"></span>
                <input type="search" class="search_input" id="searchInput" placeholder="搜索">                  
            </div>
            <label class="search_label" id="searchText">                
                <a>搜索</a>
            </label>
</div>

</article>

css样式：

.search{background-color: #F0EEEE;display: flex;    padding: .5rem 1rem;}
.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;  border: none;outline:none;padding-left: 1.8rem;}

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

效果：