選択メニューにカーソルを合わせると、X の「クリア」ボタンの下にテキストが重なるという問題が発生しています。右側にパディングを追加しても、アイコンがボックスの外に押し出されてしまうため、解決策にはなりません。ここ https://select2.org/ と Bootstrap 5
リーリー リーリー
添加以下 CSS。
.select2-selection__clear { position: absolute !important; right: 2px !important; }
https://jsfiddle.net/8n23bd6q/
こちらのドキュメント Select2 Documentation に従ってください。 width: 'style' とタグ <select> のインライン スタイルを使用して、select2 の幅を拡張できます。ここでは選択範囲の幅を 200px
width: 'style'
<select>
200px
次に、(Chrome Devtool を使用して) select2 の DOM 構造を確認すると、次の CSS を追加することで、X ボタンがテキストと重ならないようにできることがわかりました。
$("#search_bar").select2({ テーマ: 'ブートストラップ-5'、 プレースホルダー: "テキスト", allowClear: true、 幅: 'スタイル' });
.select2-selection.select2-selection--single { パディング右: 50px !重要; }
[email protected]/dist/select2-bootstrap-5-theme.min.css" /> [email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"crossorigin="anonymous"> これは長いオプション文字列です これも長いオプション文字列です
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
添加以下 CSS。
.select2-selection__clear { position: absolute !important; right: 2px !important; }https://jsfiddle.net/8n23bd6q/
こちらのドキュメント Select2 Documentation に従ってください。
に設定します。width: 'style'とタグ<select>のインライン スタイルを使用して、select2 の幅を拡張できます。ここでは選択範囲の幅を200px次に、(Chrome Devtool を使用して) select2 の DOM 構造を確認すると、次の CSS を追加することで、X ボタンがテキストと重ならないようにできることがわかりました。
.select2-selection.select2-selection--single { パディング右: 50px !重要; }$("#search_bar").select2({ テーマ: 'ブートストラップ-5'、 プレースホルダー: "テキスト", allowClear: true、 幅: 'スタイル' });.select2-selection.select2-selection--single { パディング右: 50px !重要; }