How to remove border radius from Select tag using Bootstrap ?
<select> Tag: The <select> component is used to make a drop-down list. The <select> component is most frequently used in a form, to gather user input. The name attribute is required to reference the form data after the form is submitted (in case you exclude the name attribute, no data from the drop-down list will be submitted). The id attribute is required to relate the drop-down list with a name. The <option> tag inside the <select> component characterize the accessible choices within the drop-down list.
Syntax:
<select>
<option>Option1</option>
<option>Option2</option>
.
.
.
<option>Option n</option>
</select>
Attributes:
- autofocus: Indicates that the drop-down list ought to consequently get focus when the page loads. (value: autofocus)
- disabled: Indicates that a drop-down list ought to be disabled. (value: disabled)
- form: Characterizes which form the drop-down list has a place to. (value: form_id)
- multiple: Indicates that multiple options can be chosen at once. (value: multiple)
- name: Characterizes a name for the drop-down list. (value: name)
- required: Indicates that the user is required to choose a value some time recently submitting the form. (value: required)
- size: Characterizes the number of visible options in a drop-down list. (value: number)
We can remove border radius from Select tag by two methods as follows:
Method 1: Using CSS: Use some CSS property to remove the border radius.
Example:
HTML
<!DOCTYPE html><html lang="en"> <head> <title> Remove border radius from Select tag in css </title> <style type="text/css"> /* To remove border radius */ select { height: 20px; -webkit-border-radius: 0; border: 0; outline: 1px solid #ccc; outline-offset: -1px; } </style></head> <body> <center> <h3 style="color: green"><br /> GeeksforGeeks </h3><br /> <select> <option>Option1</option> <option>Option2</option> <option>Option3</option> <option>Option4</option> <option>Option5</option> </select> </center></body> </html> |
Output:
Method 2: Using Bootstrap: The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a <select> component. Custom select menus require as it were a custom class, .custom-select to trigger the custom styles. Custom styles are restricted to the select’s starting appearance and cannot alter the option’s due to browser restrictions.
Example:
HTML
<!DOCTYPE html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> crossorigin="anonymous"> </script> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src= integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"> </script> <title> Remove border radius from Select tag in bootstrap </title> <style type="text/css"> /* For default browser setting */ select:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; padding: .5em; padding-right: 1.5em } /* To remove default border radius */ #mySelect { border-radius: 0 } /* Optional styling */ option { font-size: 1.1rem !important; font-weight: bold; text-transform: uppercase !important; color: #013208 !important; } </style></head> <body> <center> <br /> <h3 style="color: green"><br /> GeeksforGeeks </h3><br /> <select id="mySelect" class="custom-select" style="width:150px; background-color: lightgreen; font-weight:bold;color:#013208;"> <option value="1">G</option> <option value="2">E</option> <option value="3">E</option> <option value="4">K</option> <option value="5">S</option> <option value="6">F</option> <option value="7">O</option> <option value="8">R</option> <option value="9">G</option> <option value="10">E</option> <option value="11">E</option> <option value="12">K</option> <option value="13">S</option> </select> </center></body> </html> |
Output:
We can use select tag and .custom-select class with form-control as follows
Example:
HTML
<!DOCTYPE html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> crossorigin="anonymous"> </script> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src= integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"> </script> <title> Remove border radius from Select tag in bootstrap </title> <style type="text/css"> /* For default browser setting */ select:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; padding: .5em; padding-right: 1.5em } /* To remove default border radius */ #mySelect { border-radius: 0 } </style></head> <body> <center> <br /> <h3 style="color: green"><br /> GeeksforGeeks </h3><br /> <form> <div class="form-group"> <label for="mySelect">Email address</label> <input type="email" class="form-control" id="mySelect" style="width:350px;" placeholder="name@example.com"> </div> <div class="form-group"> <label for="mySelect"> Select options </label><br /> <select class="form-control custom-select" style="width:150px;" id="mySelect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> </form> </center></body> </html> |
Output:
.png)
