How to remove border radius from Select tag using Bootstrap ?

26 Jun, 2020
<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="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: 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="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: 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:
Bootstrap-Misc
CSS-Misc
HTML-Misc
Picked
Bootstrap
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.