目次
検索ボックスのデザインサンプル一覧
シンプル
<form method="get" action="#" class="t8-search-1">
<input type="text" size="20" placeholder="キーワードを入力">
<input type="submit" value="" class="fa">
</form>.t8-search-1{
position: relative;
display: block;
padding: 3px 10px;
height: 2.5em;
width: 250px;
overflow: hidden;
box-sizing: border-box;
border: 2px solid #0d6efd;;
}
.t8-search-1 input[type="text"]{
border: none;
height: 2.0em;
background: transparent;
}
.t8-search-1 input[type="text"]:focus {
outline: 0;
}
.t8-search-1 input[type="submit"]{
cursor: pointer;
color: #fff;
font-family: "Font Awesome 5 Free";
font-weight: 900;
border: none;
background: #0d6efd;
position: absolute;
width: 3.5em;
height: 3.0em;
right:0px;
top: -5px;
outline : none;
}
シンプル(角丸)
<form method="get" action="#" class="t8-search-2">
<input type="text" size="20" placeholder="キーワードを入力">
<input type="submit" value="" class="fa">
</form>.t8-search-2{
position: relative;
display: block;
padding: 3px 10px;
height: 2.5em;
width: 250px;
overflow: hidden;
box-sizing: border-box;
border: 2px solid #0d6efd;
border-radius: 10px;
}
.t8-search-2 input[type="text"]{
border: none;
height: 2.0em;
background: transparent;
}
.t8-search-2 input[type="text"]:focus {
outline: 0;
}
.t8-search-2 input[type="submit"]{
cursor: pointer;
color: #fff;
font-family: "Font Awesome 5 Free";
font-weight: 900;
border: none;
background: #0d6efd;
position: absolute;
width: 3.5em;
height: 3.0em;
right:0px;
top: -5px;
outline : none;
}
シンプル(円形)
<form method="get" action="#" class="t8-search-3">
<input type="text" size="20" placeholder="キーワードを入力">
<input type="submit" value="" class="fa">
</form>.t8-search-3{
position: relative;
display: block;
padding: 3px 10px;
height: 2.5em;
width: 250px;
overflow: hidden;
box-sizing: border-box;
border: 2px solid #0d6efd;
border-radius: 30px;
}
.t8-search-3 input[type="text"]{
border: none;
height: 2.0em;
background: transparent;
}
.t8-search-3 input[type="text"]:focus {
outline: 0;
}
.t8-search-3 input[type="submit"]{
cursor: pointer;
color: #fff;
font-family: "Font Awesome 5 Free";
font-weight: 900;
border: none;
background: #0d6efd;
position: absolute;
width: 3.5em;
height: 3.0em;
right:0px;
top: -5px;
outline : none;
}一体型
<form method="get" action="#" class="t8-search-4">
<input type="text" size="20" placeholder="キーワードを入力">
<input type="submit" value="" class="fa">
</form>.t8-search-4{
position: relative;
display: block;
padding: 3px 10px;
height: 2.5em;
width: 250px;
overflow: hidden;
box-sizing: border-box;
border: 2px solid #0d6efd;;
}
.t8-search-4 input[type="text"]{
border: none;
height: 2.0em;
background: transparent;
}
.t8-search-4 input[type="text"]:focus {
outline: 0;
}
.t8-search-4 input[type="submit"]{
cursor: pointer;
color: #fff;
font-family: "Font Awesome 5 Free";
font-weight: 900;
border: none;
background: transparent;
position: absolute;
width: 3.5em;
height: 3.0em;
right:0px;
top: -5px;
outline : none;
}一体型(反転)
<form method="get" action="#" class="t8-search-5">
<input type="submit" value="" class="fa">
<input type="text" size="20" placeholder="キーワードを入力">
</form>.t8-search-5{
position: relative;
display: block;
padding: 3px 10px;
height: 2.5em;
width: 250px;
overflow: hidden;
box-sizing: border-box;
border: 2px solid #0d6efd;;
}
.t8-search-5 input[type="text"]{
border: none;
height: 2.0em;
padding-left: 50px;
background: transparent;
}
.t8-search-5 input[type="text"]:focus {
outline: 0;
}
.t8-search-5 input[type="submit"]{
cursor: pointer;
color: #fff;
font-family: "Font Awesome 5 Free";
font-weight: 900;
border: none;
background: transparent;
position: absolute;
width: 3.5em;
height: 3.0em;
left:0px;
top: -5px;
outline : none;
}一体型(丸ボタン)
<form method="get" action="#" class="t8-search-6">
<input type="text" size="20" placeholder="キーワードを入力">
<input type="submit" value="" class="fa">
</form>.t8-search-6{
position: relative;
display: block;
padding: 3px 10px;
height: 2.5em;
width: 250px;
overflow: hidden;
box-sizing: border-box;
border: 2px solid #0d6efd;
}
.t8-search-6 input[type="text"]{
border: none;
height: 2.0em;
background: transparent;
}
.t8-search-6 input[type="text"]:focus {
outline: 0;
}
.t8-search-6 input[type="submit"]{
cursor: pointer;
color: #fff;
font-family: "Font Awesome 5 Free";
font-weight: 900;
border: none;
background: #0d6efd;
position: absolute;
width: 2em;
height: 2em;
border-radius: 50%;
right:5px;
top: 2px;
outline : none;
}分離型
<form method="get" action="#" class="t8-search-7">
<input type="text" size="20" placeholder="キーワードを入力">
<input type="submit" value="">
</form>.t8-search-7 input[type="text"]{
border: 1px solid #0d6efd;;
padding: 5px 10px;
border-radius: 3px;
height: 2.5em;
overflow: hidden;
}
.t8-search-7 input[type="text"]:focus {
outline: 0;
height: 2.0em;
}
.t8-search-7 input[type="submit"]{
cursor: pointer;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em;
border: none;
background: #0d6efd;;
border: 1px solid #0d6efd;;
border-radius: 3px;
color: #fff;
outline : none;
width: 3.5em;
height: 2.5em;
display: inline-block;
vertical-align: middle;
}分離型(丸ボタン)
<form method="get" action="#" class="t8-search-8">
<input type="text" size="20" placeholder="キーワードを入力">
<input type="submit" value="">
</form>.t8-search-8 input[type="text"]{
border: 1px solid #0d6efd;;
padding: 5px 10px;
border-radius: 3px;
height: 2.5em;
overflow: hidden;
}
.t8-search-8 input[type="text"]:focus {
outline: 0;
height: 2.0em;
}
.t8-search-8 input[type="submit"]{
cursor: pointer;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em;
border: none;
background: #0d6efd;;
border: 1px solid #0d6efd;;
border-radius: 30px;
color: #fff;
outline : none;
width: 3.5em;
height: 2.5em;
display: inline-block;
vertical-align: middle;
}