答案 0 :(得分:2)
这是我的答案。
但也许它不是很好的代码。
HTML CODE
<div class="search-form">
<input type="text" id="search" />
<span id="search-icon"></span>
</div>
CSS代码
.search-form{
position: relative;
width: 250px;
}
#search{
border: none;
width: 250px;
height: 40px;
box-shadow: 3px 5px 5px lightgray;
border-radius: 40px;
outline: none;
box-sizing: border-box;
padding-left: 10px;
padding-right: 40px;
}
#search-icon{
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
border-radius: 100%;
border: 2px solid blue;
width: 12px;
height: 12px;
}
#search-icon::after{
content: '';
position: absolute;
display: inline-block;
transform: rotate(45deg);
width: 10px;
height: 2px;
background-color: blue;
left: 10px;
top: 15px;
}
https://codepen.io/anon/pen/XaRmrp
enter code here