| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="description" content="Customize the native <select>s with custom CSS that changes the element’s initial appearance."> |
| <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> |
| <meta name="generator" content="Hugo 0.88.1"> |
| |
| <meta name="docsearch:language" content="en"> |
| <meta name="docsearch:version" content="5.1"> |
| |
| <title>Select ยท Bootstrap v5.1</title> |
| |
| <link rel="canonical" href="https://getbootstrap.com/docs/5.1/forms/select/"> |
| |
| <!-- Bootstrap core CSS --> |
| <link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> |
| |
| <link href="/docs/5.1/assets/css/docs.css" rel="stylesheet"> |
| |
| <!-- Favicons --> |
| <link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> |
| <link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> |
| <link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> |
| <link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json"> |
| <link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3"> |
| <link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico"> |
| <meta name="theme-color" content="#7952b3"> |
| |
| <!-- Twitter --> |
| <meta name="twitter:card" content="summary"> |
| <meta name="twitter:site" content="@getbootstrap"> |
| <meta name="twitter:creator" content="@getbootstrap"> |
| <meta name="twitter:title" content="Select"> |
| <meta name="twitter:description" content="Customize the native <select>s with custom CSS that changes the element’s initial appearance."> |
| <meta name="twitter:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png"> |
| |
| <!-- Facebook --> |
| <meta property="og:url" content="https://getbootstrap.com/docs/5.1/forms/select/"> |
| <meta property="og:title" content="Select"> |
| <meta property="og:description" content="Customize the native <select>s with custom CSS that changes the element’s initial appearance."> |
| <meta property="og:type" content="article"> |
| <meta property="og:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png"> |
| <meta property="og:image:type" content="image/png"> |
| <meta property="og:image:width" content="1000"> |
| <meta property="og:image:height" content="500"> |
| |
| <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> |
| <script> |
| window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; |
| ga('create', 'UA-146052-10', 'getbootstrap.com'); |
| ga('set', 'anonymizeIp', true); |
| ga('send', 'pageview'); |
| </script> |
| <script async src="https://www.google-analytics.com/analytics.js"></script> |
| |
| </head> |
| <body> |
| <div class="skippy visually-hidden-focusable overflow-hidden"> |
| <div class="container-xl"> |
| <a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a> |
| <a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a> |
| </div> |
| </div> |
| |
| <div class="d-block px-3 py-2 text-center text-bold skippy"> |
| <a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a> |
| </div> |
| |
| <header class="navbar navbar-expand-md navbar-dark bd-navbar"> |
| <nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation"> |
| <a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg> |
| </a> |
| |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi" fill="currentColor" viewBox="0 0 16 16"> |
| <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> |
| </svg> |
| |
| </button> |
| |
| <div class="collapse navbar-collapse" id="bdNavbar"> |
| <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0"> |
| <li class="nav-item col-6 col-md-auto"> |
| <a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> |
| </li> |
| <li class="nav-item col-6 col-md-auto"> |
| <a class="nav-link p-2 active" aria-current="true" href="/docs/5.1/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a> |
| </li> |
| <li class="nav-item col-6 col-md-auto"> |
| <a class="nav-link p-2" href="/docs/5.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> |
| </li> |
| <li class="nav-item col-6 col-md-auto"> |
| <a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a> |
| </li> |
| |
| <li class="nav-item col-6 col-md-auto"> |
| <a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> |
| </li> |
| </ul> |
| |
| <hr class="d-md-none text-white-50"> |
| |
| <ul class="navbar-nav flex-row flex-wrap ms-md-auto"> |
| <li class="nav-item col-6 col-md-auto"> |
| <a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg> |
| <small class="d-md-none ms-2">GitHub</small> |
| </a> |
| </li> |
| <li class="nav-item col-6 col-md-auto"> |
| <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg> |
| <small class="d-md-none ms-2">Twitter</small> |
| </a> |
| </li> |
| <li class="nav-item col-6 col-md-auto"> |
| <a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg> |
| <small class="d-md-none ms-2">Open Collective</small> |
| </a> |
| </li> |
| </ul> |
| |
| <a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.1/getting-started/download/">Download</a> |
| </div> |
| </nav> |
| </header> |
| |
| <nav class="bd-subnavbar py-2" aria-label="Secondary navigation"> |
| <div class="container-xxl d-flex align-items-md-center"> |
| <form class="bd-search position-relative me-auto"> |
| <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.1"> |
| </form> |
| |
| <div class="dropdown ms-3"> |
| <button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"> |
| <span class="d-none d-lg-inline">Bootstrap</span> v5.1 |
| </button> |
| <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions"> |
| <li><h6 class="dropdown-header">v5 releases</h6></li> |
| <li> |
| <a class="dropdown-item" href="https://getbootstrap.com/docs/5.2/forms/select/"> |
| Latest (5.2.x) |
| </a> |
| </li> |
| <li> |
| <a class="dropdown-item current" aria-current="true" href="/docs/5.1/forms/select/">v5.1.3</a> |
| </li> |
| <li> |
| <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/forms/select/">v5.0.2</a> |
| </li> |
| <li><hr class="dropdown-divider"></li> |
| <li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li> |
| <li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li> |
| <li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li> |
| <li><hr class="dropdown-divider"></li> |
| <li><a class="dropdown-item" href="/docs/versions/">All versions</a></li> |
| </ul> |
| </div> |
| |
| <button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16"> |
| <title>Expand</title> |
| <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/> |
| </svg> |
| |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" fill="currentColor" viewBox="0 0 16 16"> |
| <title>Collapse</title> |
| <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/> |
| </svg> |
| |
| </button> |
| </div> |
| </nav> |
| |
| <div class="container-xxl my-md-4 bd-layout"> |
| <aside class="bd-sidebar"> |
| <nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1"> |
| <li class="mb-1"> |
| <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false"> |
| Getting started |
| </button> |
| |
| <div class="collapse" id="getting-started-collapse"> |
| <ul class="list-unstyled fw-normal pb-1 small"> |
| <li><a href="/docs/5.1/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li> |
| <li><a href="/docs/5.1/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li> |
| <li><a href="/docs/5.1/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li> |
| <li><a href="/docs/5.1/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li> |
| <li><a href="/docs/5.1/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li> |
| <li><a href="/docs/5.1/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li> |
| <li><a href="/docs/5.1/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li> |
| <li><a href="/docs/5.1/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li> |
| <li><a href="/docs/5.1/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li> |
| <li><a href="/docs/5.1/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li> |
| <li><a href="/docs/5.1/getting-started/contribute/" class="d-inline-flex align-items-center rounded">Contribute</a></li> |
| </ul> |
| </div> |
| </li> |
| <li class="mb-1"> |
| <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false"> |
| Customize |
| </button> |
| |
| <div class="collapse" id="customize-collapse"> |
| <ul class="list-unstyled fw-normal pb-1 small"> |
| <li><a href="/docs/5.1/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li> |
| <li><a href="/docs/5.1/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li> |
| <li><a href="/docs/5.1/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li> |
| <li><a href="/docs/5.1/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li> |
| <li><a href="/docs/5.1/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li> |
| <li><a href="/docs/5.1/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li> |
| <li><a href="/docs/5.1/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li> |
| </ul> |
| </div> |
| </li> |
| <li class="mb-1"> |
| <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false"> |
| Layout |
| </button> |
| |
| <div class="collapse" id="layout-collapse"> |
| <ul class="list-unstyled fw-normal pb-1 small"> |
| <li><a href="/docs/5.1/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li> |
| <li><a href="/docs/5.1/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li> |
| <li><a href="/docs/5.1/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li> |
| <li><a href="/docs/5.1/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li> |
| <li><a href="/docs/5.1/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li> |
| <li><a href="/docs/5.1/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li> |
| <li><a href="/docs/5.1/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li> |
| <li><a href="/docs/5.1/layout/css-grid/" class="d-inline-flex align-items-center rounded">CSS Grid</a></li> |
| </ul> |
| </div> |
| </li> |
| <li class="mb-1"> |
| <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false"> |
| Content |
| </button> |
| |
| <div class="collapse" id="content-collapse"> |
| <ul class="list-unstyled fw-normal pb-1 small"> |
| <li><a href="/docs/5.1/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li> |
| <li><a href="/docs/5.1/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li> |
| <li><a href="/docs/5.1/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li> |
| <li><a href="/docs/5.1/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li> |
| <li><a href="/docs/5.1/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li> |
| </ul> |
| </div> |
| </li> |
| <li class="mb-1"> |
| <button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="true" aria-current="true"> |
| Forms |
| </button> |
| |
| <div class="collapse show" id="forms-collapse"> |
| <ul class="list-unstyled fw-normal pb-1 small"> |
| <li><a href="/docs/5.1/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li> |
| <li><a href="/docs/5.1/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li> |
| <li><a href="/docs/5.1/forms/select/" class="d-inline-flex align-items-center rounded active" aria-current="page">Select</a></li> |
| <li><a href="/docs/5.1/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li> |
| <li><a href="/docs/5.1/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li> |
| <li><a href="/docs/5.1/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li> |
| <li><a href="/docs/5.1/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li> |
| <li><a href="/docs/5.1/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li> |
| <li><a href="/docs/5.1/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li> |
| </ul> |
| </div> |
| </li> |
| <li class="mb-1"> |
| <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false"> |
| Components |
| </button> |
| |
| <div class="collapse" id="components-collapse"> |
| <ul class="list-unstyled fw-normal pb-1 small"> |
| <li><a href="/docs/5.1/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li> |
| <li><a href="/docs/5.1/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li> |
| <li><a href="/docs/5.1/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li> |
| <li><a href="/docs/5.1/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li> |
| <li><a href="/docs/5.1/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li> |
| <li><a href="/docs/5.1/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li> |
| <li><a href="/docs/5.1/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li> |
| <li><a href="/docs/5.1/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li> |
| <li><a href="/docs/5.1/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li> |
| <li><a href="/docs/5.1/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li> |
| <li><a href="/docs/5.1/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li> |
| <li><a href="/docs/5.1/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li> |
| <li><a href="/docs/5.1/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li> |
| <li><a href="/docs/5.1/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li> |
| <li><a href="/docs/5.1/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li> |
| <li><a href="/docs/5.1/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li> |
| <li><a href="/docs/5.1/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li> |
| <li><a href="/docs/5.1/components/placeholders/" class="d-inline-flex align-items-center rounded">Placeholders</a></li> |
| <li><a href="/docs/5.1/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li> |
| <li><a href="/docs/5.1/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li> |
| <li><a href="/docs/5.1/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li> |
| <li><a href="/docs/5.1/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li> |
| <li><a href="/docs/5.1/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li> |
| <li><a href="/docs/5.1/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li> |
| </ul> |
| </div> |
| </li> |
| <li class="mb-1"> |
| <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false"> |
| Helpers |
| </button> |
| |
| <div class="collapse" id="helpers-collapse"> |
| <ul class="list-unstyled fw-normal pb-1 small"> |
| <li><a href="/docs/5.1/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li> |
| <li><a href="/docs/5.1/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li> |
| <li><a href="/docs/5.1/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li> |
| <li><a href="/docs/5.1/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li> |
| <li><a href="/docs/5.1/helpers/stacks/" class="d-inline-flex align-items-center rounded">Stacks</a></li> |
| <li><a href="/docs/5.1/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li> |
| <li><a href="/docs/5.1/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li> |
| <li><a href="/docs/5.1/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li> |
| <li><a href="/docs/5.1/helpers/vertical-rule/" class="d-inline-flex align-items-center rounded">Vertical rule</a></li> |
| </ul> |
| </div> |
| </li> |
| <li class="mb-1"> |
| <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false"> |
| Utilities |
| </button> |
| |
| <div class="collapse" id="utilities-collapse"> |
| <ul class="list-unstyled fw-normal pb-1 small"> |
| <li><a href="/docs/5.1/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li> |
| <li><a href="/docs/5.1/utilities/background/" class="d-inline-flex align-items-center rounded">Background</a></li> |
| <li><a href="/docs/5.1/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li> |
| <li><a href="/docs/5.1/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li> |
| <li><a href="/docs/5.1/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li> |
| <li><a href="/docs/5.1/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li> |
| <li><a href="/docs/5.1/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li> |
| <li><a href="/docs/5.1/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li> |
| <li><a href="/docs/5.1/utilities/opacity/" class="d-inline-flex align-items-center rounded">Opacity</a></li> |
| <li><a href="/docs/5.1/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li> |
| <li><a href="/docs/5.1/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li> |
| <li><a href="/docs/5.1/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li> |
| <li><a href="/docs/5.1/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li> |
| <li><a href="/docs/5.1/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li> |
| <li><a href="/docs/5.1/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li> |
| <li><a href="/docs/5.1/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li> |
| <li><a href="/docs/5.1/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li> |
| </ul> |
| </div> |
| </li> |
| <li class="mb-1"> |
| <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false"> |
| Extend |
| </button> |
| |
| <div class="collapse" id="extend-collapse"> |
| <ul class="list-unstyled fw-normal pb-1 small"> |
| <li><a href="/docs/5.1/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li> |
| <li><a href="/docs/5.1/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li> |
| </ul> |
| </div> |
| </li> |
| <li class="mb-1"> |
| <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false"> |
| About |
| </button> |
| |
| <div class="collapse" id="about-collapse"> |
| <ul class="list-unstyled fw-normal pb-1 small"> |
| <li><a href="/docs/5.1/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li> |
| <li><a href="/docs/5.1/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li> |
| <li><a href="/docs/5.1/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li> |
| <li><a href="/docs/5.1/about/license/" class="d-inline-flex align-items-center rounded">License</a></li> |
| <li><a href="/docs/5.1/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li> |
| </ul> |
| </div> |
| </li> |
| |
| <li> |
| <a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded"> |
| Migration |
| </a> |
| </li> |
| </ul> |
| </nav> |
| |
| </aside> |
| |
| <main class="bd-main order-1"> |
| <div class="bd-intro ps-lg-4"> |
| <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> |
| <a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/v5.1.3/site/content/docs/5.1/forms/select.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a> |
| <h1 class="bd-title" id="content">Select</h1> |
| </div> |
| <p class="bd-lead">Customize the native <code><select></code>s with custom CSS that changes the element’s initial appearance.</p> |
| <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom&format=responsive" id="_carbonads_js"></script> |
| |
| </div> |
| |
| <div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted"> |
| <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong> |
| <nav id="TableOfContents"> |
| <ul> |
| <li><a href="#default">Default</a></li> |
| <li><a href="#sizing">Sizing</a></li> |
| <li><a href="#disabled">Disabled</a></li> |
| <li><a href="#sass">Sass</a> |
| <ul> |
| <li><a href="#variables">Variables</a></li> |
| </ul> |
| </li> |
| </ul> |
| </nav> |
| </div> |
| |
| <div class="bd-content ps-lg-4"> |
| |
| <h2 id="default">Default</h2> |
| <p>Custom <code><select></code> menus need only a custom class, <code>.form-select</code> to trigger the custom styles. Custom styles are limited to the <code><select></code>’s initial appearance and cannot modify the <code><option></code>s due to browser limitations.</p> |
| <div class="bd-example"> |
| <select class="form-select" aria-label="Default select example"> |
| <option selected>Open this select menu</option> |
| <option value="1">One</option> |
| <option value="2">Two</option> |
| <option value="3">Three</option> |
| </select> |
| </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">select</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-select"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Default select example"</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">selected</span><span class="p">></span>Open this select menu<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"1"</span><span class="p">></span>One<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Two<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"3"</span><span class="p">></span>Three<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"></</span><span class="nt">select</span><span class="p">></span></code></pre></div> |
| <h2 id="sizing">Sizing</h2> |
| <p>You may also choose from small and large custom selects to match our similarly sized text inputs.</p> |
| <div class="bd-example"> |
| <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"> |
| <option selected>Open this select menu</option> |
| <option value="1">One</option> |
| <option value="2">Two</option> |
| <option value="3">Three</option> |
| </select> |
| |
| <select class="form-select form-select-sm" aria-label=".form-select-sm example"> |
| <option selected>Open this select menu</option> |
| <option value="1">One</option> |
| <option value="2">Two</option> |
| <option value="3">Three</option> |
| </select> |
| </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">select</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-select form-select-lg mb-3"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">".form-select-lg example"</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">selected</span><span class="p">></span>Open this select menu<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"1"</span><span class="p">></span>One<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Two<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"3"</span><span class="p">></span>Three<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"></</span><span class="nt">select</span><span class="p">></span> |
| |
| <span class="p"><</span><span class="nt">select</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-select form-select-sm"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">".form-select-sm example"</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">selected</span><span class="p">></span>Open this select menu<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"1"</span><span class="p">></span>One<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Two<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"3"</span><span class="p">></span>Three<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"></</span><span class="nt">select</span><span class="p">></span></code></pre></div> |
| <p>The <code>multiple</code> attribute is also supported:</p> |
| <div class="bd-example"> |
| <select class="form-select" multiple aria-label="multiple select example"> |
| <option selected>Open this select menu</option> |
| <option value="1">One</option> |
| <option value="2">Two</option> |
| <option value="3">Three</option> |
| </select> |
| </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">select</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-select"</span> <span class="na">multiple</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"multiple select example"</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">selected</span><span class="p">></span>Open this select menu<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"1"</span><span class="p">></span>One<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Two<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"3"</span><span class="p">></span>Three<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"></</span><span class="nt">select</span><span class="p">></span></code></pre></div> |
| <p>As is the <code>size</code> attribute:</p> |
| <div class="bd-example"> |
| <select class="form-select" size="3" aria-label="size 3 select example"> |
| <option selected>Open this select menu</option> |
| <option value="1">One</option> |
| <option value="2">Two</option> |
| <option value="3">Three</option> |
| </select> |
| </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">select</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-select"</span> <span class="na">size</span><span class="o">=</span><span class="s">"3"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"size 3 select example"</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">selected</span><span class="p">></span>Open this select menu<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"1"</span><span class="p">></span>One<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Two<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"3"</span><span class="p">></span>Three<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"></</span><span class="nt">select</span><span class="p">></span></code></pre></div> |
| <h2 id="disabled">Disabled</h2> |
| <p>Add the <code>disabled</code> boolean attribute on a select to give it a grayed out appearance and remove pointer events.</p> |
| <div class="bd-example"> |
| <select class="form-select" aria-label="Disabled select example" disabled> |
| <option selected>Open this select menu</option> |
| <option value="1">One</option> |
| <option value="2">Two</option> |
| <option value="3">Three</option> |
| </select> |
| </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">select</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-select"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Disabled select example"</span> <span class="na">disabled</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">selected</span><span class="p">></span>Open this select menu<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"1"</span><span class="p">></span>One<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Two<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"3"</span><span class="p">></span>Three<span class="p"></</span><span class="nt">option</span><span class="p">></span> |
| <span class="p"></</span><span class="nt">select</span><span class="p">></span></code></pre></div> |
| <h2 id="sass">Sass</h2> |
| <h3 id="variables">Variables</h3> |
| <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$form-select-padding-y</span><span class="o">:</span> <span class="nv">$input-padding-y</span><span class="p">;</span> |
| <span class="nv">$form-select-padding-x</span><span class="o">:</span> <span class="nv">$input-padding-x</span><span class="p">;</span> |
| <span class="nv">$form-select-font-family</span><span class="o">:</span> <span class="nv">$input-font-family</span><span class="p">;</span> |
| <span class="nv">$form-select-font-size</span><span class="o">:</span> <span class="nv">$input-font-size</span><span class="p">;</span> |
| <span class="nv">$form-select-indicator-padding</span><span class="o">:</span> <span class="nv">$form-select-padding-x</span> <span class="o">*</span> <span class="mi">3</span><span class="p">;</span> <span class="c1">// Extra padding for background-image |
| </span><span class="c1"></span><span class="nv">$form-select-font-weight</span><span class="o">:</span> <span class="nv">$input-font-weight</span><span class="p">;</span> |
| <span class="nv">$form-select-line-height</span><span class="o">:</span> <span class="nv">$input-line-height</span><span class="p">;</span> |
| <span class="nv">$form-select-color</span><span class="o">:</span> <span class="nv">$input-color</span><span class="p">;</span> |
| <span class="nv">$form-select-bg</span><span class="o">:</span> <span class="nv">$input-bg</span><span class="p">;</span> |
| <span class="nv">$form-select-disabled-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span> |
| <span class="nv">$form-select-disabled-bg</span><span class="o">:</span> <span class="nv">$gray-200</span><span class="p">;</span> |
| <span class="nv">$form-select-disabled-border-color</span><span class="o">:</span> <span class="nv">$input-disabled-border-color</span><span class="p">;</span> |
| <span class="nv">$form-select-bg-position</span><span class="o">:</span> <span class="ni">right</span> <span class="nv">$form-select-padding-x</span> <span class="ni">center</span><span class="p">;</span> |
| <span class="nv">$form-select-bg-size</span><span class="o">:</span> <span class="mi">16</span><span class="kt">px</span> <span class="mi">12</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// In pixels because image dimensions |
| </span><span class="c1"></span><span class="nv">$form-select-indicator-color</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="p">;</span> |
| <span class="nv">$form-select-indicator</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='</span><span class="si">#{</span><span class="nv">$form-select-indicator-color</span><span class="si">}</span><span class="sx">' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>")</span><span class="p">;</span> |
| |
| <span class="nv">$form-select-feedback-icon-padding-end</span><span class="o">:</span> <span class="nv">$form-select-padding-x</span> <span class="o">*</span> <span class="mi">2</span><span class="mf">.5</span> <span class="o">+</span> <span class="nv">$form-select-indicator-padding</span><span class="p">;</span> |
| <span class="nv">$form-select-feedback-icon-position</span><span class="o">:</span> <span class="ni">center</span> <span class="ni">right</span> <span class="nv">$form-select-indicator-padding</span><span class="p">;</span> |
| <span class="nv">$form-select-feedback-icon-size</span><span class="o">:</span> <span class="nv">$input-height-inner-half</span> <span class="nv">$input-height-inner-half</span><span class="p">;</span> |
| |
| <span class="nv">$form-select-border-width</span><span class="o">:</span> <span class="nv">$input-border-width</span><span class="p">;</span> |
| <span class="nv">$form-select-border-color</span><span class="o">:</span> <span class="nv">$input-border-color</span><span class="p">;</span> |
| <span class="nv">$form-select-border-radius</span><span class="o">:</span> <span class="nv">$input-border-radius</span><span class="p">;</span> |
| <span class="nv">$form-select-box-shadow</span><span class="o">:</span> <span class="nv">$box-shadow-inset</span><span class="p">;</span> |
| |
| <span class="nv">$form-select-focus-border-color</span><span class="o">:</span> <span class="nv">$input-focus-border-color</span><span class="p">;</span> |
| <span class="nv">$form-select-focus-width</span><span class="o">:</span> <span class="nv">$input-focus-width</span><span class="p">;</span> |
| <span class="nv">$form-select-focus-box-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mi">0</span> <span class="nv">$form-select-focus-width</span> <span class="nv">$input-btn-focus-color</span><span class="p">;</span> |
| |
| <span class="nv">$form-select-padding-y-sm</span><span class="o">:</span> <span class="nv">$input-padding-y-sm</span><span class="p">;</span> |
| <span class="nv">$form-select-padding-x-sm</span><span class="o">:</span> <span class="nv">$input-padding-x-sm</span><span class="p">;</span> |
| <span class="nv">$form-select-font-size-sm</span><span class="o">:</span> <span class="nv">$input-font-size-sm</span><span class="p">;</span> |
| <span class="nv">$form-select-border-radius-sm</span><span class="o">:</span> <span class="nv">$input-border-radius-sm</span><span class="p">;</span> |
| |
| <span class="nv">$form-select-padding-y-lg</span><span class="o">:</span> <span class="nv">$input-padding-y-lg</span><span class="p">;</span> |
| <span class="nv">$form-select-padding-x-lg</span><span class="o">:</span> <span class="nv">$input-padding-x-lg</span><span class="p">;</span> |
| <span class="nv">$form-select-font-size-lg</span><span class="o">:</span> <span class="nv">$input-font-size-lg</span><span class="p">;</span> |
| <span class="nv">$form-select-border-radius-lg</span><span class="o">:</span> <span class="nv">$input-border-radius-lg</span><span class="p">;</span> |
| |
| <span class="nv">$form-select-transition</span><span class="o">:</span> <span class="nv">$input-transition</span><span class="p">;</span> |
| </code></pre></div> |
| |
| </div> |
| </main> |
| </div> |
| |
| <footer class="bd-footer py-5 mt-5 bg-light"> |
| <div class="container py-5"> |
| <div class="row"> |
| <div class="col-lg-3 mb-3"> |
| <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg> |
| <span class="fs-5">Bootstrap</span> |
| </a> |
| <ul class="list-unstyled small text-muted"> |
| <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.1/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li> |
| <li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li> |
| <li class="mb-2">Currently v5.1.3.</li> |
| <li class="mb-2">Analytics by <a href="https://usefathom.com/ref/ADZSBE" target="_blank" rel="noopener">Fathom</a>.</li> |
| </ul> |
| </div> |
| <div class="col-6 col-lg-2 offset-lg-1 mb-3"> |
| <h5>Links</h5> |
| <ul class="list-unstyled"> |
| <li class="mb-2"><a href="/">Home</a></li> |
| <li class="mb-2"><a href="/docs/5.1/">Docs</a></li> |
| <li class="mb-2"><a href="/docs/5.1/examples/">Examples</a></li> |
| |
| <li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li> |
| <li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li> |
| </ul> |
| </div> |
| <div class="col-6 col-lg-2 mb-3"> |
| <h5>Guides</h5> |
| <ul class="list-unstyled"> |
| <li class="mb-2"><a href="/docs/5.1/getting-started/">Getting started</a></li> |
| <li class="mb-2"><a href="/docs/5.1/examples/starter-template/">Starter template</a></li> |
| <li class="mb-2"><a href="/docs/5.1/getting-started/webpack/">Webpack</a></li> |
| <li class="mb-2"><a href="/docs/5.1/getting-started/parcel/">Parcel</a></li> |
| </ul> |
| </div> |
| <div class="col-6 col-lg-2 mb-3"> |
| <h5>Projects</h5> |
| <ul class="list-unstyled"> |
| <li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li> |
| <li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li> |
| <li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li> |
| <li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li> |
| <li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li> |
| </ul> |
| </div> |
| <div class="col-6 col-lg-2 mb-3"> |
| <h5>Community</h5> |
| <ul class="list-unstyled"> |
| <li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li> |
| <li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li> |
| <li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li> |
| <li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li> |
| <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| <script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> |
| |
| <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |
| |
| <script src="/docs/5.1/assets/js/docs.min.js"></script> |
| |
| </body> |
| </html> |
