ネイティブ `<select>` スタイルの2つのバグを修正
ネイティブスタイルユーティリティにおける <select> 要素の表示崩れ2件が修正されました。選択テキストがキャレットアイコンと重なる問題と、multiple 属性を持つ <select> が正しく展開されない問題が解消されています。
背景
#2193 で報告された通り、ネイティブスタイルユーティリティの <select> 要素には2つの独立したバグが存在していました。
1つ目は、選択中のオプション名が長い場合にキャレットアイコンの下に文字が潜り込む問題です。<select> の右端には背景画像としてキャレットアイコンが配置されていますが、テキストがそのアイコン領域まで伸びることを防ぐパディングが不足していました。
2つ目は、multiple 属性を持つ <select> が単一行のまま表示される問題です。通常の <select> 向けに設定された固定高さやスタイルが <select multiple> にもそのまま継承されるため、複数行の選択肢が表示されませんでした。
技術的な変更
packages/webawesome/src/styles/native.css における <select> のスタイル定義が修正され、2つのバグがそれぞれ独立したCSSの変更によって解消されました。
問題1の修正（テキストとアイコンの重複）:
変更前:
position: relative;
min-width: 0;
overflow: hidden;
background-image: var(--icon-caret), var(--icon-caret);
background-repeat: no-repeat;
background-position: center right var(--wa-form-control-padding-inline);
background-blend-mode: hue, difference;
background-size: 1rem 1rem;
cursor: pointer;
変更後:
position: relative;
min-width: 0;
background-image: var(--icon-caret), var(--icon-caret);
background-repeat: no-repeat;
background-position: center right var(--wa-form-control-padding-inline);
background-blend-mode: hue, difference;
background-size: 1rem 1rem;
text-overflow: ellipsis;
padding-inline-end: calc(var(--wa-form-control-padding-inline) + 1rem + var(--wa-space-xs));
overflow: hidden;
cursor: pointer;
&[multiple] {
height: auto;
background-image: none;
padding-inline: var(--wa-form-control-padding-inline);
}
padding-inline-end に calc(var(--wa-form-control-padding-inline) + 1rem + var(--wa-space-xs)) を設定することで、キャレットアイコン（1rem）と余白（--wa-space-xs）分だけ追加のスペースを確保しています。また text-overflow: ellipsis を加えることで、それでもテキストが溢れる場合は省略記号で切り詰めるようになります。なお、overflow: hidden の宣言位置がキャレット背景画像の定義より後に移動していますが、これは text-overflow: ellipsis と padding-inline-end の追加に合わせてプロパティを論理的にグループ化したものです。
問題2の修正（multiple 属性時の展開）:
&[multiple] セレクタで height: auto を指定し、単一選択時に設定された固定高さを上書きしています。また background-image: none でキャレットアイコンを非表示にし、padding-inline を均等なフォームコントロール用パディングに戻すことで、複数選択リストとして自然な見た目になります。
設計判断
&[multiple] のネストセレクタを用いた上書き方式が採用されました。
単一 <select> と <select multiple> は見た目や操作感が大きく異なりますが、両者に共通するスタイル（border、font、color など）は多く存在します。そのため、共通スタイルをベースとして定義し、multiple 属性を持つ場合のみ差分を上書きするアプローチは、CSSの重複を避ける上で自然な選択です。キャレットアイコンは単一選択時の「開く」操作を示すUIヒントですが、multiple ではブラウザネイティブのリスト表示となるため不要であり、background-image: none での除去も理にかなっています。
まとめ
今回の修正は、CSS設計プロパティ3つ（padding-inline-end、text-overflow、overflow）の追加と、属性セレクタによる multiple 専用スタイルの追加という最小限の変更で2件のバグを解消しています。キャレットアイコンのサイズをデザイントークンと calc() で動的に計算するアプローチにより、フォームコントロールのパディングが変更された場合でも正しいオフセットが自動的に維持されます。