【Cocoon】検索フォームのデザインをCSSで変更する方法｜コピペOKサンプル集

/* Cocoon検索フォーム ボタン分離デザイン */

.search-box{
  --search-btn-width:60px; /* ボタン幅 */
  --search-btn-bg:#a5c9c1; /* ボタン背景色 */
  max-width:350px;/* 最大幅 */
  margin-inline:auto; /* 中央配置 */
}

/* 入力欄 */
.search-box .search-edit{
  padding-right:calc(var(--search-btn-width) + 10px);
  border-color:var(--search-btn-bg);
  border-radius:0;
}

/* 検索ボタン */
.search-box .search-submit{
  top:0;
  right:0;
  height:100%;
  width:var(--search-btn-width);
  background:var(--search-btn-bg);
  color:#fff;
}

/* フォーカス時 */
.search-box .search-edit:focus{
  outline:none;
}

/* Cocoon検索フォーム （ボタン分離・影） */

.search-box{
  --search-btn-width:60px; /* ボタン幅 */
  --search-btn-bg:#a5c9c1; /* ボタン背景色 */
  max-width:350px;/* 最大幅 */
  margin-inline:auto; /* 中央配置 */
}

/* 入力欄 */
.search-box .search-edit{
  padding-right:calc(var(--search-btn-width) + 10px);
  border: none;
  box-shadow: 0 4px 4px rgb(0 0 0 / .1);
  border-radius: 1px;
}

/* 検索ボタン */
.search-box .search-submit{
  top:0;
  right:0;
  height:100%;
  width:var(--search-btn-width);
  background:var(--search-btn-bg);
  color:#fff;
}

/* フォーカス時 */
.search-box .search-edit:focus{
  outline:none;
}

/* Cocoon検索フォーム （角丸） */

.search-box{
  --search-border-color: #999; /* 枠線の色 */
  max-width:350px;/* 最大幅 */
  margin-inline:auto; /* 中央配置 */
}

/* 入力欄 */
.search-box .search-edit{
  padding: 10px 45px 10px 20px;
  border-width:2px;
  border-radius:50px;
}

/* 検索ボタン */
.search-box .search-submit{
  right: 10px
}

/* フォーカス時 */
.search-box .search-edit:focus{
  outline:none;
}

/* ----------------------------------------
検索フォーム（下線デザイン）
---------------------------------------- */

.search-box{
  --search-color:#a5c9c1; /* アイコン・下線カラー */
  max-width:350px; /* 最大幅 */
  margin-inline:auto; /* 中央配置 */
}

/* 入力欄 */
.search-box .search-edit{
  padding:10px 40px 10px 0;
  border:none;
  border-bottom:2px solid var(--search-color);
  border-radius:0;
}

/* 検索ボタン */
.search-box .search-submit{
  right:0;
  background:none;
  color:var(--search-color);
}

/* フォーカス時 */
.search-box .search-edit:focus{
  outline:none;
}

/* Cocoon検索フォーム（フラットカラー） */

.search-box{
  --search-bg:#f5f7f7; /* 入力欄背景 */
  --search-btn-bg:#B2ABA1; /* アイコン色 */
  max-width:350px;
  margin-inline:auto;
}

/* 入力欄 */
.search-box .search-edit{
  padding:10px 40px 10px 15px;
  border:none;
  background:var(--search-bg);
  border-radius:6px;
}

/* 検索ボタン */
.search-box .search-submit{
  right:10px;
  color:var(--search-btn-bg);
  background:none;
}

/* フォーカス */
.search-box .search-edit:focus{
  outline:none;
}