AI向け説明 AI Description

`F-002` はネイティブの`<select>`要素の代わりに、完全にスタイリング可能なカスタムセレクトボックスです。CSSの`max-height`トランジションでドロップダウンの開閉を制御し、JavaScriptでクリックイベントと選択状態を管理します。

`F-002` replaces the native `<select>` element with a fully stylable custom select box. CSS `max-height` transition controls the dropdown open/close, while JavaScript manages click events and selection state.

調整可能パラメータ Adjustable Parameters

• --select-radius — 角丸の大きさCorner radius size
• --transition-speed — 開閉アニメーションの速度Open/close animation speed

実装 Implementation

HTML + CSS + JS

<div class="custom-select" id="mySelect">
  <div class="custom-select__trigger">
    <span>Select an option</span>
    <span class="arrow"></span>
  </div>
  <div class="custom-select__options">
    <div class="custom-select__option" data-value="a">Option A</div>
    <div class="custom-select__option" data-value="b">Option B</div>
  </div>
</div>

<style>
:root {
  --select-radius: 12px;
  --select-bg: #ffffff;
  --select-border: #e0e4f0;
  --transition-speed: 0.3s;
}
</style>

<script>
const select = document.getElementById('mySelect');
const trigger = select.querySelector('.custom-select__trigger span');
select.querySelector('.custom-select__trigger').addEventListener('click', () => {
  select.classList.toggle('open');
});
select.querySelectorAll('.custom-select__option').forEach(option => {
  option.addEventListener('click', () => {
    trigger.textContent = option.textContent;
    select.classList.remove('open');
    select.querySelectorAll('.custom-select__option').forEach(o => o.classList.remove('selected'));
    option.classList.add('selected');
  });
});
document.addEventListener('click', e => {
  if (!select.contains(e.target)) select.classList.remove('open');
});
</script>

React (JSX + CSS)

// react/F-002.jsx
import { useState, useRef, useEffect } from 'react';
import './F-002.css';

export default function CustomSelect({ options = [], placeholder = '選択してください' }) {
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState(null);
  const ref = useRef(null);

  useEffect(() => {
    const handler = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); };
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, []);

  return (
    <div className={`custom-select ${open ? 'open' : ''}`} ref={ref}>
      <div className="custom-select__trigger" onClick={() => setOpen(!open)}>
        <span>{selected || placeholder}</span>
        <span className="arrow" />
      </div>
      <div className="custom-select__options">
        {options.map(opt => (
          <div key={opt.value} className={`custom-select__option ${selected === opt.label ? 'selected' : ''}`}
            onClick={() => { setSelected(opt.label); setOpen(false); }}>
            {opt.label}
          </div>
        ))}
      </div>
    </div>
  );
}

/* react/F-002.css */
/* F-002: Custom Select Dropdown */
.custom-select {
  position: relative;
  cursor: pointer;
}

.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 2px solid var(--border, #e0e4f0);
  border-radius: 12px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.custom-select.open .custom-select__trigger {
  border-color: #5c6ac4;
  border-radius: 12px 12px 0 0;
}

.custom-select__trigger .arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #999;
  transition: transform 0.3s ease;
}

.custom-select.open .arrow {
  transform: rotate(180deg);
}

.custom-select__options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 2px solid #5c6ac4;
  border-top: none;
  border-radius: 0 0 12px 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  z-index: 10;
  background: #fff;
}

.custom-select.open .custom-select__options {
  max-height: 300px;
}

.custom-select__option {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.custom-select__option:hover {
  background: #f5f7ff;
}

.custom-select__option.selected {
  background: #5c6ac4;
  color: #fff;
}