本文へスキップ

CRG-08 — FORMS

フォーム部品25点 在庫あり

入力欄・トグル・チェック。触って気持ちいい部品。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-08-001

スライドトグルToggle Switch

.cg-fm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.cg-fm-toggle input { position: absolute; opacity: 0; width: 0; }
.cg-fm-toggle i {
  width: 48px;
  height: 28px;
  border-radius: 20px;
  background: #C9C5BA;
  position: relative;
  transition: background .25s;
}
.cg-fm-toggle i::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(27, 26, 23, .25);
  transition: transform .25s cubic-bezier(.3, 1.4, .6, 1);
}
.cg-fm-toggle input:checked + i { background: #E8590C; }
.cg-fm-toggle input:checked + i::before { transform: translateX(20px); }
.cg-fm-toggle input:focus-visible + i { outline: 3px solid #3A5A78; outline-offset: 2px; }
<label class="cg-fm-toggle"><input type="checkbox" checked><i></i>通知を受け取る</label>
GROSS WT. 936 B ORIGINAL
CRG-08-002

弾むチェックボックスPop Checkbox

.cg-fm-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.cg-fm-check input { position: absolute; opacity: 0; width: 0; }
.cg-fm-check i {
  width: 24px;
  height: 24px;
  border: 2px solid #1B1A17;
  border-radius: 6px;
  position: relative;
  transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .6, 1);
}
.cg-fm-check i::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .2s cubic-bezier(.3, 1.6, .6, 1);
}
.cg-fm-check input:checked + i {
  background: #E8590C;
  border-color: #E8590C;
  transform: scale(1.1);
}
.cg-fm-check input:checked + i::before { transform: rotate(45deg) scale(1); }
.cg-fm-check input:focus-visible + i { outline: 3px solid #3A5A78; outline-offset: 2px; }
<label class="cg-fm-check"><input type="checkbox" checked><i></i>利用規約に同意する</label>
GROSS WT. 1037 B ORIGINAL
CRG-08-003

フロートラベル入力欄Floating Label

.cg-fm-float {
  position: relative;
  display: inline-block;
  width: 240px;
}
.cg-fm-float input {
  width: 100%;
  padding: 18px 14px 8px;
  font-size: 15px;
  border: 2px solid #C9C5BA;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}
.cg-fm-float input:focus { outline: none; border-color: #E8590C; }
.cg-fm-float span {
  position: absolute;
  left: 14px;
  top: 13px;
  font-size: 14px;
  color: #5A5650;
  pointer-events: none;
  transition: all .18s ease;
}
.cg-fm-float input:focus + span,
.cg-fm-float input:not(:placeholder-shown) + span {
  top: 5px;
  font-size: 10.5px;
  color: #E8590C;
  font-weight: 700;
}
<label class="cg-fm-float"><input type="text" placeholder=" "><span>お名前</span></label>
GROSS WT. 737 B ORIGINAL
CRG-08-004

下線が走る入力欄Underline Input

.cg-fm-under {
  position: relative;
  display: inline-block;
  width: 240px;
}
.cg-fm-under input {
  width: 100%;
  padding: 10px 4px;
  font-size: 15px;
  border: none;
  border-bottom: 2px solid #C9C5BA;
  background: transparent;
  box-sizing: border-box;
}
.cg-fm-under input:focus { outline: none; }
.cg-fm-under i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #E8590C;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.cg-fm-under input:focus ~ i { transform: scaleX(1); }
<label class="cg-fm-under"><input type="email" placeholder="メールアドレス"><i></i></label>
GROSS WT. 661 B ORIGINAL
CRG-08-005
配送方法

ピル型ラジオボタンPill Radios

.cg-fm-pills {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
.cg-fm-pills legend {
  font-size: 12px;
  font-weight: 700;
  color: #5A5650;
  margin-bottom: 8px;
}
.cg-fm-pills input { position: absolute; opacity: 0; width: 0; }
.cg-fm-pills span {
  display: inline-block;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid #C9C5BA;
  border-radius: 30px;
  cursor: pointer;
  transition: all .18s;
}
.cg-fm-pills input:checked + span {
  background: #1B1A17;
  border-color: #1B1A17;
  color: #fff;
}
.cg-fm-pills input:focus-visible + span { outline: 3px solid #3A5A78; outline-offset: 2px; }
<fieldset class="cg-fm-pills"><legend>配送方法</legend><label><input type="radio" name="cg-ship" checked><span>通常便</span></label><label><input type="radio" name="cg-ship"><span>速達便</span></label><label><input type="radio" name="cg-ship"><span>店舗受取</span></label></fieldset>
GROSS WT. 972 B ORIGINAL
CRG-08-006

丸型検索ボックスRound Search

.cg-fm-search {
  display: inline-flex;
  align-items: center;
  width: 260px;
  border: 2px solid #1B1A17;
  border-radius: 30px;
  background: #fff;
  overflow: hidden;
}
.cg-fm-search input {
  flex: 1;
  padding: 11px 18px;
  font-size: 14px;
  border: none;
  background: none;
}
.cg-fm-search input:focus { outline: none; }
.cg-fm-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  align-self: stretch;
  border: none;
  background: #E8590C;
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.cg-fm-search button:hover { background: #B84508; }
<form class="cg-fm-search" role="search"><input type="search" placeholder="キーワードを入力"><button type="submit" aria-label="検索"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg></button></form>
GROSS WT. 979 B ORIGINAL
CRG-08-007

カスタムレンジスライダーRange Slider

.cg-fm-range {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  width: 230px;
}
.cg-fm-range input {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, #E8590C 60%, #E5E1D6 60%);
  cursor: pointer;
}
.cg-fm-range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #E8590C;
  box-shadow: 0 2px 6px rgba(27, 26, 23, .25);
}
.cg-fm-range input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #E8590C;
}
<label class="cg-fm-range">音量<input type="range" min="0" max="100" value="60"></label>
GROSS WT. 780 B ORIGINAL
CRG-08-008

ステッパー(数量選択)Quantity Stepper

.cg-fm-step {
  display: inline-flex;
  border: 2px solid #1B1A17;
  border-radius: 10px;
  overflow: hidden;
}
.cg-fm-step button {
  width: 42px;
  height: 42px;
  border: none;
  background: #F2B707;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition: background .15s;
}
.cg-fm-step button:hover { background: #E8590C; color: #fff; }
.cg-fm-step input {
  width: 52px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-left: 2px solid #1B1A17;
  border-right: 2px solid #1B1A17;
}
.cg-fm-step input:focus { outline: none; background: #FBF4EA; }
<div class="cg-fm-step"><button type="button" aria-label="減らす">−</button><input type="text" value="2" inputmode="numeric" aria-label="数量"><button type="button" aria-label="増やす">＋</button></div>
GROSS WT. 816 B ORIGINAL
CRG-08-009

カスタムセレクトStyled Select

.cg-fm-select {
  position: relative;
  display: inline-block;
  width: 220px;
}
.cg-fm-select select {
  width: 100%;
  padding: 12px 40px 12px 14px;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid #1B1A17;
  border-radius: 8px;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.cg-fm-select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border: solid #E8590C;
  border-width: 0 3px 3px 0;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.cg-fm-select select:focus { outline: 3px solid #3A5A78; outline-offset: 2px; }
<label class="cg-fm-select"><select><option>大阪府</option><option>東京都</option><option>福岡県</option></select></label>
GROSS WT. 781 B ORIGINAL
CRG-08-010

タグ選択チップTag Chips

.cg-fm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cg-fm-chips input { position: absolute; opacity: 0; width: 0; }
.cg-fm-chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  border: 2px solid #C9C5BA;
  border-radius: 8px;
  cursor: pointer;
  transition: all .18s;
}
.cg-fm-chips span::before {
  content: "+";
  font-weight: 900;
  color: #5A5650;
}
.cg-fm-chips input:checked + span {
  background: #FFF1E7;
  border-color: #E8590C;
  color: #B84508;
}
.cg-fm-chips input:checked + span::before { content: "✓"; color: #E8590C; }
.cg-fm-chips input:focus-visible + span { outline: 3px solid #3A5A78; outline-offset: 2px; }
<div class="cg-fm-chips"><label><input type="checkbox" checked><span>CSS</span></label><label><input type="checkbox"><span>HTML</span></label><label><input type="checkbox" checked><span>Design</span></label></div>
GROSS WT. 950 B ORIGINAL
CRG-08-011
認証コード

認証コード入力欄OTP Boxes

.cg-fm-otp {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.cg-fm-otp legend {
  font-size: 12px;
  font-weight: 700;
  color: #5A5650;
  margin-bottom: 10px;
}
.cg-fm-otp input {
  width: 46px;
  height: 54px;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  font-family: 'Courier New', monospace;
  border: 2px solid #C9C5BA;
  border-radius: 10px;
  background: #fff;
}
.cg-fm-otp input:focus {
  outline: none;
  border-color: #E8590C;
  box-shadow: 0 0 0 3px rgba(232, 89, 12, .2);
}
<fieldset class="cg-fm-otp"><legend>認証コード</legend><input type="text" maxlength="1" inputmode="numeric" value="4" aria-label="1桁目"><input type="text" maxlength="1" inputmode="numeric" value="2" aria-label="2桁目"><input type="text" maxlength="1" inputmode="numeric" aria-label="3桁目"><input type="text" maxlength="1" inputmode="numeric" aria-label="4桁目"></fieldset>
GROSS WT. 918 B ORIGINAL
CRG-08-012

ファイル添付エリアFile Dropzone

.cg-fm-file {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 260px;
  padding: 28px 20px;
  color: #5A5650;
  background: #FBFAF7;
  border: 2.5px dashed #C9C5BA;
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, background .2s;
}
.cg-fm-file:hover { border-color: #E8590C; background: #FFF7F1; color: #B84508; }
.cg-fm-file input { display: none; }
.cg-fm-file b { font-size: 13.5px; }
.cg-fm-file span { font-size: 11.5px; color: #8B857A; }
<label class="cg-fm-file"><input type="file"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/></svg><b>クリックしてファイルを選択</b><span>PNG / JPG / PDF・10MBまで</span></label>
GROSS WT. 944 B ORIGINAL
CRG-08-013

accent-color一行カスタムAccent Color

/* ネイティブ部品の色は accent-color 一行で変えられる */
.cg-fm-accent {
  display: grid;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  accent-color: #E8590C;
}
.cg-fm-accent label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.cg-fm-accent input[type="checkbox"],
.cg-fm-accent input[type="radio"] {
  width: 18px;
  height: 18px;
}
<div class="cg-fm-accent"><label><input type="checkbox" checked>チェックボックス</label><label><input type="radio" name="cg-ac" checked>ラジオボタン</label><input type="range" value="60" aria-label="スライダー"></div>
GROSS WT. 624 B ORIGINAL
CRG-08-014

エラーで震える入力欄Invalid Shake

.cg-fm-shake {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  width: 250px;
}
.cg-fm-shake input {
  padding: 12px 14px;
  font-size: 14px;
  border: 2px solid #C9C5BA;
  border-radius: 8px;
}
.cg-fm-shake input:invalid {
  border-color: #C0392B;
  background: #FDF1EF;
  animation: cg-fm-shake-no .4s ease;
}
.cg-fm-shake input:focus { outline: none; }
.cg-fm-shake span {
  display: none;
  font-size: 11.5px;
  font-weight: 700;
  color: #C0392B;
}
.cg-fm-shake input:invalid ~ span { display: block; }
@keyframes cg-fm-shake-no {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
<label class="cg-fm-shake"><input type="email" value="not-an-email" placeholder="メールアドレス" required><span>メールアドレスの形式で入力してください</span></label>
GROSS WT. 900 B ORIGINAL
CRG-08-015

昼夜トグルDay/Night Toggle

.cg-fm-daynight { cursor: pointer; display: inline-block; }
.cg-fm-daynight input { position: absolute; opacity: 0; width: 0; }
.cg-fm-daynight i {
  display: block;
  width: 64px;
  height: 34px;
  border-radius: 30px;
  background: linear-gradient(120deg, #7FB4E8, #BBDCF5);
  position: relative;
  transition: background .4s;
  overflow: hidden;
}
.cg-fm-daynight i::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE9A8, #F2B707);
  box-shadow: 0 0 10px rgba(242, 183, 7, .8);
  transition: transform .4s cubic-bezier(.3, 1.3, .6, 1), background .4s;
}
.cg-fm-daynight input:checked + i {
  background: linear-gradient(120deg, #1A2342, #0B1026);
}
.cg-fm-daynight input:checked + i::before {
  transform: translateX(30px);
  background: radial-gradient(circle at 62% 35%, #F5F2E8, #C9C5BA);
  box-shadow: inset -4px 2px 0 rgba(27, 26, 23, .18), 0 0 8px rgba(255, 255, 255, .4);
}
.cg-fm-daynight input:focus-visible + i { outline: 3px solid #3A5A78; outline-offset: 2px; }
<label class="cg-fm-daynight" aria-label="ダークモード切替"><input type="checkbox"><i></i></label>
GROSS WT. 1209 B ORIGINAL
CRG-08-016

ステップ進捗バーStep Progress

.cg-fm-steps {
  display: flex;
  gap: 8px;
  width: 240px;
}
.cg-fm-steps i {
  flex: 1;
  height: 8px;
  border-radius: 6px;
  background: #E5E1D6;
  overflow: hidden;
  position: relative;
}
.cg-fm-steps i.done::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #E8590C;
  border-radius: 6px;
}
.cg-fm-steps i.now::before {
  animation: cg-fm-steps-fill 1.6s cubic-bezier(.4, 0, .2, 1) infinite;
  transform-origin: left;
}
@keyframes cg-fm-steps-fill {
  0% { transform: scaleX(0); }
  60%, 100% { transform: scaleX(1); }
}
<div class="cg-fm-steps" aria-label="入力ステップ 2/3"><i class="done"></i><i class="done now"></i><i></i></div>
GROSS WT. 667 B ORIGINAL
CRG-08-017

スライドセグメント選択Sliding Segments

/* :has()で選択位置を検知し、白いノブがスライドする */
.cg-fm-seg {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 4px;
  border: none;
  background: #E5E1D6;
  border-radius: 30px;
}
.cg-fm-seg label { position: relative; z-index: 1; }
.cg-fm-seg input { position: absolute; opacity: 0; }
.cg-fm-seg span {
  display: inline-block;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  color: #5A5650;
  cursor: pointer;
  transition: color .25s;
}
.cg-fm-seg label:has(input:checked) span { color: #1B1A17; }
.cg-fm-seg i {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 2px 6px rgba(27, 26, 23, .18);
  transition: transform .3s cubic-bezier(.3, 1.2, .5, 1);
}
.cg-fm-seg:has(label:last-of-type input:checked) i {
  transform: translateX(100%);
}
<fieldset class="cg-fm-seg"><label><input type="radio" name="cg-seg" checked><span>月払い</span></label><label><input type="radio" name="cg-seg"><span>年払い</span></label><i aria-hidden="true"></i></fieldset>
GROSS WT. 1116 B ORIGINAL
CRG-08-018

フォーカスで広がる検索窓Expanding Search

.cg-fm-expand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px solid #1B1A17;
  border-radius: 30px;
  background: #fff;
  color: #5A5650;
  transition: box-shadow .25s;
}
.cg-fm-expand input {
  width: 90px;
  border: none;
  background: none;
  font-size: 14px;
  transition: width .35s cubic-bezier(.3, 1, .4, 1);
}
.cg-fm-expand input:focus { outline: none; }
.cg-fm-expand:focus-within {
  box-shadow: 0 4px 14px rgba(232, 89, 12, .25);
  border-color: #E8590C;
}
.cg-fm-expand:focus-within input { width: 170px; }
<label class="cg-fm-expand"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg><input type="search" placeholder="検索"></label>
GROSS WT. 851 B ORIGINAL
CRG-08-019

光るフォーカス入力欄Glow Focus

.cg-fm-glow {
  width: 240px;
  padding: 13px 16px;
  font-size: 14px;
  border: 2px solid #C9C5BA;
  border-radius: 10px;
  background: #fff;
  transition: border-color .25s;
  box-sizing: border-box;
}
.cg-fm-glow:focus {
  outline: none;
  border-color: #E8590C;
  animation: cg-fm-glow-pulse 1.8s ease-out infinite;
}
@keyframes cg-fm-glow-pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 89, 12, .35); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(232, 89, 12, 0); }
}
<input class="cg-fm-glow" type="text" placeholder="クリックすると光る">
GROSS WT. 546 B ORIGINAL
CRG-08-020

ハートが弾むいいねHeart Like

.cg-fm-heart {
  display: inline-block;
  cursor: pointer;
}
.cg-fm-heart input { position: absolute; opacity: 0; width: 0; }
.cg-fm-heart svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: #8B857A;
  stroke-width: 2;
  transition: stroke .2s, fill .2s;
}
.cg-fm-heart input:checked + svg {
  fill: #E8557E;
  stroke: #E8557E;
  animation: cg-fm-heart-pop .5s cubic-bezier(.3, 1.6, .5, 1);
}
.cg-fm-heart input:focus-visible + svg { outline: 3px solid #3A5A78; outline-offset: 3px; border-radius: 6px; }
@keyframes cg-fm-heart-pop {
  0% { transform: scale(.6); }
  55% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
<label class="cg-fm-heart" aria-label="いいね"><input type="checkbox"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></label>
GROSS WT. 919 B ORIGINAL
CRG-08-021

縁を光が周回する入力欄Border Trace Input

.cg-fm-trace-wrap {
  position: relative;
  display: inline-block;
  border-radius: 10px;
  padding: 2px;
  overflow: hidden;
}
.cg-fm-trace-wrap::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(232, 89, 12, .25) 305deg, #E8590C 340deg, transparent 360deg);
  animation: cg-fm-trace-spin 2.4s linear infinite;
}
.cg-fm-trace-input {
  position: relative;
  z-index: 1;
  width: 236px;
  padding: 13px 16px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}
.cg-fm-trace-input:focus { outline: 2px solid #3A5A78; outline-offset: 2px; }
@keyframes cg-fm-trace-spin {
  to { transform: rotate(360deg); }
}
<span class="cg-fm-trace-wrap"><input class="cg-fm-trace-input" type="text" placeholder="常時トレース"></span>
GROSS WT. 869 B ORIGINAL
CRG-08-022

マスク解除できるパスワード欄Password Peek

/* -webkit-text-security はWebKit/Blink系限定の非標準プロパティ(Firefox非対応) */
.cg-fm-peek {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 240px;
}
.cg-fm-peek-toggle { position: absolute; opacity: 0; width: 0; height: 0; }
.cg-fm-peek-input {
  width: 100%;
  padding: 13px 44px 13px 16px;
  font-size: 15px;
  letter-spacing: .04em;
  border: 2px solid #C9C5BA;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  -webkit-text-security: disc;
  transition: border-color .2s;
}
.cg-fm-peek-input:focus { outline: none; border-color: #E8590C; }
.cg-fm-peek-toggle:checked ~ .cg-fm-peek-input { -webkit-text-security: none; }
.cg-fm-peek-icon {
  position: absolute;
  right: 12px;
  display: flex;
  width: 24px;
  height: 24px;
  color: #8B857A;
  cursor: pointer;
  transition: color .2s;
}
.cg-fm-peek-icon:hover { color: #E8590C; }
.cg-fm-peek-eye, .cg-fm-peek-eye-off { position: absolute; inset: 0; }
.cg-fm-peek-eye-off { display: none; }
.cg-fm-peek-toggle:checked ~ .cg-fm-peek-icon .cg-fm-peek-eye { display: none; }
.cg-fm-peek-toggle:checked ~ .cg-fm-peek-icon .cg-fm-peek-eye-off {
  display: block;
  animation: cg-fm-peek-pop .3s cubic-bezier(.3, 1.4, .6, 1);
}
.cg-fm-peek-toggle:focus-visible ~ .cg-fm-peek-icon { outline: 3px solid #3A5A78; outline-offset: 2px; border-radius: 6px; }
@keyframes cg-fm-peek-pop {
  0% { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
<div class="cg-fm-peek"><input type="checkbox" id="cg-peek-1" class="cg-fm-peek-toggle"><input class="cg-fm-peek-input" type="text" value="Sup3rSecret!" aria-label="パスワード"><label for="cg-peek-1" class="cg-fm-peek-icon" aria-label="パスワードの表示切替"><svg class="cg-fm-peek-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg><svg class="cg-fm-peek-eye-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a20.4 20.4 0 0 1 5.06-5.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a20.32 20.32 0 0 1-3.22 4.44M14.12 14.12a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg></label></div>
GROSS WT. 2440 B ORIGINAL
CRG-08-023

弾む星評価Bouncy Star Rating

/* DOMは5→1の逆順+row-reverseで並べ、~ で「自分より後ろ(視覚的に左側)」を連鎖点灯させる定番トリック */
.cg-fm-star {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
  border: none;
  margin: 0;
  padding: 0;
}
.cg-fm-star input { position: absolute; opacity: 0; width: 0; height: 0; }
.cg-fm-star label {
  width: 30px;
  height: 30px;
  color: #C9C5BA;
  cursor: pointer;
  transition: color .15s, transform .15s cubic-bezier(.3, 1.6, .6, 1);
}
.cg-fm-star label svg { width: 100%; height: 100%; display: block; }
.cg-fm-star label:hover { transform: scale(1.15); }
.cg-fm-star input:checked ~ label,
.cg-fm-star label:hover ~ label,
.cg-fm-star label:hover {
  color: #F2B707;
}
.cg-fm-star input:checked + label svg {
  animation: cg-fm-star-pop .4s cubic-bezier(.3, 1.6, .5, 1);
}
.cg-fm-star input:focus-visible + label { outline: 3px solid #3A5A78; outline-offset: 2px; border-radius: 6px; }
@keyframes cg-fm-star-pop {
  0% { transform: scale(.5); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
<fieldset class="cg-fm-star" aria-label="評価"><input type="radio" name="cg-star" id="cg-star-5" value="5"><label for="cg-star-5" aria-label="5"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.6l-5.9 3 1.3-6.6-4.9-4.6 6.6-.8z"/></svg></label><input type="radio" name="cg-star" id="cg-star-4" value="4"><label for="cg-star-4" aria-label="4"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.6l-5.9 3 1.3-6.6-4.9-4.6 6.6-.8z"/></svg></label><input type="radio" name="cg-star" id="cg-star-3" value="3" checked><label for="cg-star-3" aria-label="3"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.6l-5.9 3 1.3-6.6-4.9-4.6 6.6-.8z"/></svg></label><input type="radio" name="cg-star" id="cg-star-2" value="2"><label for="cg-star-2" aria-label="2"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.6l-5.9 3 1.3-6.6-4.9-4.6 6.6-.8z"/></svg></label><input type="radio" name="cg-star" id="cg-star-1" value="1"><label for="cg-star-1" aria-label="1"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.6l-5.9 3 1.3-6.6-4.9-4.6 6.6-.8z"/></svg></label></fieldset>
GROSS WT. 2470 B ORIGINAL
CRG-08-024
都道府県

グラス風カスタムセレクトGlass Custom Select

/* ネイティブdetails/summaryをJS無しでカスタムセレクト化。パネルはbackdrop-filterで磨りガラス */
.cg-fm-dsel {
  position: relative;
  width: 220px;
  font-size: 14px;
}
.cg-fm-dsel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-weight: 700;
  border: 2px solid #1B1A17;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  list-style: none;
}
.cg-fm-dsel summary::-webkit-details-marker { display: none; }
.cg-fm-dsel summary svg {
  width: 16px;
  height: 16px;
  transition: transform .25s ease;
}
.cg-fm-dsel[open] summary svg { transform: rotate(180deg); }
.cg-fm-dsel[open] summary { border-radius: 10px 10px 0 0; }
.cg-fm-dsel-panel {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  padding: 8px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 2px solid #1B1A17;
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 24px rgba(27, 26, 23, .18);
}
.cg-fm-dsel-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  animation: cg-fm-dsel-in .3s ease forwards;
}
.cg-fm-dsel-panel label:nth-child(1) { animation-delay: .02s; }
.cg-fm-dsel-panel label:nth-child(2) { animation-delay: .06s; }
.cg-fm-dsel-panel label:nth-child(3) { animation-delay: .1s; }
.cg-fm-dsel-panel label:nth-child(4) { animation-delay: .14s; }
.cg-fm-dsel-panel label:hover { background: #FFF1E7; }
.cg-fm-dsel-panel input { position: absolute; opacity: 0; width: 0; }
.cg-fm-dsel-panel input:checked ~ span { color: #E8590C; font-weight: 700; }
.cg-fm-dsel-panel input:focus-visible ~ span { outline: 3px solid #3A5A78; outline-offset: 2px; border-radius: 4px; }
@keyframes cg-fm-dsel-in {
  to { opacity: 1; transform: translateY(0); }
}
<details class="cg-fm-dsel"><summary>都道府県<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary><div class="cg-fm-dsel-panel"><label><input type="radio" name="cg-dsel-pref" checked><span>大阪府</span></label><label><input type="radio" name="cg-dsel-pref"><span>東京都</span></label><label><input type="radio" name="cg-dsel-pref"><span>福岡県</span></label><label><input type="radio" name="cg-dsel-pref"><span>北海道</span></label></div></details>
GROSS WT. 2542 B ORIGINAL
CRG-08-025

ネイティブカスタマイズセレクトNative Customizable Select

/* appearance: base-select はネイティブ<select>のUAスタイルを解除し、::picker(select)でドロップダウン自体を、
   option内は任意のHTML(色ドット等)を配置できる新API。JS不要でリッチな選択肢を作れる。非対応ブラウザでは通常のselectとして機能する */
.cg-fm-nsel {
  appearance: base-select;
  width: 220px;
  font-size: 14px;
  font-weight: 700;
}
.cg-fm-nsel::picker-icon {
  color: #1B1A17;
  transition: rotate .25s ease;
}
.cg-fm-nsel:open::picker-icon {
  rotate: 180deg;
}
.cg-fm-nsel button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #1B1A17;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.cg-fm-nsel::picker(select) {
  appearance: base-select;
  margin-top: 6px;
  padding: 8px;
  border: 2px solid #1B1A17;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(27, 26, 23, .18);
}
.cg-fm-nsel option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background .15s;
}
.cg-fm-nsel option:hover,
.cg-fm-nsel option:focus-visible {
  background: #FFF1E7;
}
.cg-fm-nsel option:checked {
  background: #FFE8D8;
}
.cg-fm-nsel option::checkmark {
  display: none;
}
.cg-fm-nsel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cg-fm-nsel-dot-a { background: #E8590C; }
.cg-fm-nsel-dot-b { background: #3A5A78; }
.cg-fm-nsel-dot-c { background: #C89B6C; }
.cg-fm-nsel-dot-d { background: #F2B707; }
<select class="cg-fm-nsel"><button type="button"><selectedcontent></selectedcontent></button><option value="osaka" selected><span class="cg-fm-nsel-dot cg-fm-nsel-dot-a"></span>大阪エリア</option><option value="tokyo"><span class="cg-fm-nsel-dot cg-fm-nsel-dot-b"></span>東京エリア</option><option value="fukuoka"><span class="cg-fm-nsel-dot cg-fm-nsel-dot-c"></span>福岡エリア</option><option value="hokkaido"><span class="cg-fm-nsel-dot cg-fm-nsel-dot-d"></span>北海道エリア</option></select>
GROSS WT. 2091 B ORIGINAL