選択

要素の初期の外観を変更するカスタムCSSを使用して、ネイティブの<select>をカスタマイズします。

デフォルト

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; function SelectBasicExample() { return ( <Form.Select aria-label="Default select example"> <option>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </Form.Select> ); } export default SelectBasicExample;

import Form from 'react-bootstrap/Form';

function SelectBasicExample() {
  return (
    <Form.Select aria-label="Default select example">
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </Form.Select>
  );
}

export default SelectBasicExample;

サイズ

同様にサイズのテキスト入力に一致させるために、smallまたはlargeのカスタム選択から選択することもできます。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; function SelectSizesExample() { return ( <> <Form.Select size="lg"> <option>Large select</option> </Form.Select> <br /> <Form.Select> <option>Default select</option> </Form.Select> <br /> <Form.Select size="sm"> <option>Small select</option> </Form.Select> </> ); } export default SelectSizesExample;

import Form from 'react-bootstrap/Form';

function SelectSizesExample() {
  return (
    <>
      <Form.Select size="lg">
        <option>Large select</option>
      </Form.Select>
      <br />
      <Form.Select>
        <option>Default select</option>
      </Form.Select>
      <br />
      <Form.Select size="sm">
        <option>Small select</option>
      </Form.Select>
    </>
  );
}

export default SelectSizesExample;

API

FormSelect