検索ボックスにFontAwesome 5を使う方法
検索ボックスにインラインでボタンを設置する方法です。
<form method="get" action="#" class="search_container">
<input type="text" placeholder="検索">
<button type="submit">
<i class="fas fa-search"></i>
</button>
</form>.search_container {
position: relative;
box-sizing: border-box;
border: 2px solid #000;
display: block;
height: 2.3em;
width: 256px;
overflow: hidden;
}
.search_container input[type="text"] {
border: none;
height: 2.0em;
padding: 0 10px;
}
.search_container input[type="text"]:focus {
outline: 0;
}
.search_container button {
cursor: pointer;
border: none;
background: #f0f0f0;
color: #000;
position: absolute;
width: 3rem;
height: 3.0rem;
right: 0;
top: -5px;
outline: none;
}
