簡単検索フォームの作成、虫眼鏡アイコンをCSSのみで作成する

よくある虫眼鏡のついた検索フォームをCSSだけで作成しました。

擬似要素のbeforeとafterを使うことで、虫眼鏡を作成することが出来ます。
beforeで虫眼鏡の円を作り、afterで右下の線を再現します。
擬似要素のbeforeとafterを使うことで、少ないコード量で実現することが出来ます。

○HTML

<div class=”searchForm”>
<input class=”searchForm-input” type=”text”>
<button class=”searchForm-submit” type=”submit”></button>
</div>

○CSS

.PanelSearch input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 6px 5px;
border: 1px solid #999;
border-radius: 5px;
}
.PanelSearch .searchForm {
position: relative;
width: 200px;
display:inline-block;
}
.searchForm-input {
width: auto;
}
.searchForm-submit {
position: absolute;
width: 36px;
height: 34px;
top: calc(50% – 19px);
right: 5px;
border-radius: 0 4px 4px 0;
background: #999;
border:none;
cursor: pointer;
margin-top: 1px;
}
.searchForm-submit::before {
position: absolute;
content: ”;
width: 15px;
height: 15px;
top: calc(50% – 9px);
left: calc(50% – 9px);
border-radius: 50%;
box-shadow: 0 0 0 2px #fff;
}
.searchForm-submit::after {
position: absolute;
content: ”;
width: 8px;
height: 6px;
top: calc(50% + 6px);
left: calc(50% + 2px);
border-top: solid 2px #fff;
transform: rotate(45deg);
}