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:
Syntax:
<select> <option>Option1</option> <option>Option2</option> . . . <option>Option n</option> </select>
<!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: #e3711c"><br /> BAJARANGI SOFT </h3><br /> <select> <option>Option1</option> <option>Option2</option> <option>Option3</option> <option>Option4</option> <option>Option5</option> </select> </center> </body> </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= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity= "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://kit.fontawesome.com/577845f6a5.js" crossorigin="anonymous"> </script> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 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: #db522f"><br /> BAJARANGI SOFT </h3><br /> <select id="mySelect" class="custom-select" style="width:150px; background-color: #e79e32; 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>
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://kit.fontawesome.com/577845f6a5.js" crossorigin="anonymous"></script> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 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: #e5cc28"><br /> BAJARANGI SOFT </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>