Cocoon 検索ボックスのデザインをカスタマイズする方法（枠、色、文字の変更）とデザインサンプル5つ

Cocoonの検索ボックスをカスタマイズする方法

デフォルトの検索ボックス

枠線の変更

.search-edit{
 border: 1px solid #333;
}

背景色の変更

.search-edit{
 background-color: #ccc;
}

文字サイズの変更

.search-edit{
 font-size: 14px;
}

検索ボタンの背景色

.search-submit {
background-color: #4570b4;
}

検索ボタンの文字（アイコン）サイズ

.search-submit {
 font-size: 14px;
}

search-submit

表示テキストの変更

  <input type="text" placeholder="<?php _e( 'SEARCH', THEME_NAME ) ?>" name="s" class="サイト内を検索" aria-label="input">

タブレットなどで横幅を100%にせずに中央揃え

.search-box{
　max-width:480px;
　margin-left: auto;
　margin-right: auto;
}

検索ボックスのデザインサンプル5つ

１．シンプル枠線

.search-edit{
 border: 1px solid #6c6c6c;
 border-radius: 0;
 font-size: 14px;
}
.search-submit {
 color: #6c6c6c;
 font-size: 16px;
}

２．シンプル枠線なし

.search-edit{
 border: 0;
 border-radius: 0;
 background-color: #f7f7f7;
 font-size: 14px;
}
.search-submit {
 color: #949495;
 font-size: 15px;
}

３．フラットデザイン風

/************************************
** 検索ボックス
************************************/
.search-edit{
　background-color: #f7f7f7;
　border:0;
　border-radius:0;
　font-size:14px;
}
.search-submit{
  background-color: #d29f83;
  width: 60px;
　color:#f7f7f7;
  font-size: 14px;
  line-height: 44px;
}

４．フラットデザインダーク

.search-edit{
 border: 0;
 border-radius: 0;
 background-color: #505050;
 font-size: 16px;
 color: #f7f7f7;
}
.search-submit {
color:#f7f7f7;
font-size: 16px;
}
.search-box input::placeholder{
 color:#f7f7f7;
}

５．下線のみ

.search-edit{
 border: 0;
 border-bottom: 1px solid #505050;
 font-size: 14px;
}
.search-submit {
 color: #505050;
 font-size: 15px;
}

さいごに