English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap4 You can customize some form styles to replace the default styles of the browser.
If you want to customize a checkbox, you can set the <div> as the parent element with the class .custom-control and .custom-checkbox, the checkbox as a child element is placed inside the <div>, and then the checkbox is set to type="checkbox", class as .custom-control-input.
The text of the checkbox is used label label, use .custom for the label-control-label class,label the for attribute value needs to match the id of the checkbox.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Custom Checkbox</h2> <p>If you want to customize a checkbox, you can set the <div> as the parent element, class as .custom-control and .custom-checkbox, the checkbox is placed as a child element inside the <div>, and then the checkbox is set to type="checkbox", class as .custom-control-input.</p> <p>The text of the checkbox is used with the label tag, and the tag uses .custom-control-label class, the for attribute value of label needs to match the id of the checkbox.</p> <form action="/action_page.php"> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck" name="example1"> <label class="custom-control-label" for="customCheck">Custom Checkbox</label> </div> <input type="checkbox" id="defaultCheck" name="example2"> <label for="defaultCheck">Default Checkbox</label> <br> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </body> </html>Test and see ‹/›
The effect after running is as follows:
If you want to customize a radio button, you can set <div> as the parent element, class as .custom-control and .custom-radio, the radio button is placed as a child element inside the <div> inside, and then the radio button is set to type="radio", class as .custom-control-input.
The text of the radio button is used label label, use .custom for the label-control-label class,label the for attribute value needs to match the id of the radio button id。
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Custom Radio Button</h2> <p>If you want to customize a radio button, you can set the div as the parent element, class as .custom-control and .custom-radio, the checkbox is placed as a child element inside the div, and then the radio button is set to type="radio", class as .custom-control-input.</p> <p>The text of the radio button is used with the label tag, and the tag uses .custom-control-label class, the for attribute value of label needs to match the id of the radio button.</p> <form action="/action_page.php"> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="customRadio" name="example1"> <label class="custom-control-label" for="customRadio">Custom Radio Button</label> </div> <input type="radio" id="defaultRadio" name="example2"> <label for="defaultRadio">Default radio button</label> <br> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </body> </html>Test and see ‹/›
The effect after running is as follows:
We can use .custom on external elements-control-Use inline class to wrap custom form controls, so that custom form controls can be displayed on the same line：
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Custom controls displayed on the same line</h2> <p>We can use .custom on external elements-control-Use inline class to wrap custom form controls, so that custom form controls can be displayed on the same line：</p> <form action="/action_page.php"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="customRadio1" name="example1"> <label class="custom-control-label" for="customRadio1">Custom radio button 1</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="customRadio2" name="example2"> <label class="custom-control-label" for="customRadio2">Custom radio button 2</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </body> </html>Test and see ‹/›
The effect after running is as follows:
Create a custom selection menu can be <select> Add .custom to the element-select class:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Custom selection menu</h2> <p>Create a custom selection menu by adding .custom to the select element-select class:/p> <form> <select name="cars" class="custom-select-sm"> <option selected>Custom selection menu/option> <option value="Google">Google</option> <option value="w3codebox">w3codebox</option> <option value="Taobao">Taobao</option> </select> </form> </div> </body> </html>Test and see ‹/›
The effect after running is as follows:
If we want to set the size of the custom selection menu, we can use .custom-select-sm, .custom-select-Use lg to set their size:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Custom selection menu size</h2> <p>If we want to set the size of the custom selection menu, we can use .custom-select-sm, .custom-select-Use lg to set their size:/p> <form> <!-- small --> <select name="cars" class="custom-select-sm"> <option selected>A smaller custom selection menu</option> <option value="Google">Google</option> <option value="w3codebox">w3codebox</option> <option value="Taobao">Taobao</option> </select> <!-- large --> <select name="cars" class="custom-select-lg"> <option selected>A larger custom selection menu</option> <option value="Google">Google</option> <option value="w3codebox">w3codebox</option> <option value="Taobao">Taobao</option> </select> </form> </div> </body> </html>Test and see ‹/›
The effect after running is as follows:
We can add input for type="range" Add .custom to the input box-to set custom slider controls:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Custom slider control</h2> <p>We can add .custom to the input box with type="range"-range class to set the custom slider control:</p> <form action="/action_page.php"> <label for="customRange">Custom slider control</label> <input type="range" class="custom-range" id="customRange" name="points1"> <label for="defaultRange">Default slider control</label> <input type="range" id="defaultRange" name="points2"> <p><button type="submit" class="btn btn-primary">Submit</button></p> </form> </div> </body> </html>Test and see ‹/›
The effect after running is as follows:
We can add to the parent element .custom-file class, then input set as type="file" and add .custom-file-input:
The text of the upload control uses label label, use .custom for the label-file-label class,label the for attribute value must match the upload control id。
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Custom file upload control</h2> <p>We can add .custom to the parent element-file class, then set the input type to "file" and add .custom-control-label:</p> <form action="/action_page.php"> <p>Custom file upload style:</p> <div class="custom-file mb-3"> <input type="file" class="custom-file-input" id="customFile" name="filename"> <label class="custom-file-label" for="customFile">Select File</label> </div> <p>Default file upload style:</p> <input type="file" id="myFile" name="filename2"> <div class="mt-3"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> </div> </body> </html>Test and see ‹/›
The effect after running is as follows: