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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

We can use select tag and .custom-select class with form-control as follows

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.