选择

使用自定义 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;

大小

您也可以从小型和大型自定义选择中进行选择，以匹配我们类似大小的文本输入。

结果

加载中...

实时编辑器

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