Remove Border Radius from Select Tag in Bootstrap 3

Remove border radius from Select tag in bootstrap 3

Here is a version that works in all modern browsers. The key is using appearance:none which removes the default formatting. Since all of the formatting is gone, you have to add back in the arrow that visually differentiates the select from the input. Note: appearance is not supported in IE.

Working example: https://jsfiddle.net/gs2q1c7p/

select:not([multiple]) {    -webkit-appearance: none;    -moz-appearance: none;    background-position: right 50%;    background-repeat: no-repeat;    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);    padding: .5em;    padding-right: 1.5em}
#mySelect {    border-radius: 0}

<select id="mySelect">    <option>Option 1</option>    <option>Option 2</option></select>

How to remove border radius on Chosen-Select?

Just change border-radius to 0.

Currently border-radius: 4px; See commented CSS inside example for all the border-radius rules that can/should be changed to maintain consistency.

$('.chosen').chosen({  no_results_text: "Nothing!",  allow_single_deselect: true});

select.form-control + .chosen-container.chosen-container-single .chosen-single {  display: block;  width: 100%;  height: 34px;  padding: 6px 12px;  font-size: 14px;  line-height: 1.428571429;  color: #555;  vertical-align: middle;  background-color: #fff;  border: 1px solid #ccc;  border-radius: 0;  /*Changed from 4px*/  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;  background-image: none;}select.form-control + .chosen-container.chosen-container-single .chosen-single div {  top: 4px;  color: #000;}select.form-control + .chosen-container .chosen-drop {  background-color: #FFF;  border: 1px solid #CCC;  border: 1px solid rgba(0, 0, 0, 0.15);  border-radius: 0;  /*Changed from 4px*/  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);  background-clip: padding-box;  margin: 2px 0 0;}select.form-control + .chosen-container .chosen-search input[type=text] {  display: block;  width: 100%;  height: 34px;  padding: 6px 12px;  font-size: 14px;  line-height: 1.428571429;  color: #555;  vertical-align: middle;  background-color: #FFF;  border: 1px solid #CCC;  border-radius: 0;  /*Changed from 4px*/  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;  background-image: none;}select.form-control + .chosen-container .chosen-results {  margin: 2px 0 0;  padding: 5px 0;  font-size: 14px;  list-style: none;  background-color: #fff;  margin-bottom: 5px;}select.form-control + .chosen-container .chosen-results li,select.form-control + .chosen-container .chosen-results li.active-result {  display: block;  padding: 3px 20px;  clear: both;  font-weight: normal;  line-height: 1.428571429;  color: #333;  white-space: nowrap;  background-image: none;}select.form-control + .chosen-container .chosen-results li:hover,select.form-control + .chosen-container .chosen-results li.active-result:hover,select.form-control + .chosen-container .chosen-results li.highlighted {  color: #FFF;  text-decoration: none;  background-color: #428BCA;  background-image: none;}select.form-control + .chosen-container-multi .chosen-choices {  display: block;  width: 100%;  min-height: 34px;  padding: 6px;  font-size: 14px;  line-height: 1.428571429;  color: #555;  vertical-align: middle;  background-color: #FFF;  border: 1px solid #CCC;  border-radius: 0;  /*Changed from 4px*/  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;  background-image: none;}select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"] {  height: auto;  padding: 5px 0;}select.form-control + .chosen-container-multi .chosen-choices li.search-choice {  background-image: none;  padding: 3px 24px 3px 5px;  margin: 0 6px 0 0;  font-size: 14px;  font-weight: normal;  line-height: 1.428571429;  text-align: center;  white-space: nowrap;  vertical-align: middle;  cursor: pointer;  border: 1px solid #ccc;  border-radius: 0;  /*Changed from 4px*/  color: #333;  background-color: #FFF;  border-color: #CCC;}select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {  top: 8px;  right: 6px;}select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,select.form-control + .chosen-container .chosen-search input[type=text]:focus {  border-color: #66AFE9;  outline: 0;  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);}select.form-control + .chosen-container-multi .chosen-results li.result-selected {  display: list-item;  color: #ccc;  cursor: default;  background-color: white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet" /><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><hr><div class="container">  <form>    <div class="form-group">      <label for="testing" class="control-label">Select</label>      <select name="testing" id="testing" class="form-control chosen" data-placeholder="Select" required>        <option value=""></option>        <option value="1">One</option>        <option value="2">Two</option>        <option value="3">Three</option>        <option value="4">Four</option>        <option value="5">Five</option>        <option value="6">Six</option>        <option value="7">Seven</option>        <option value="8">Eight</option>        <option value="9">Nine</option>        <option value="10">Ten</option>        <option value="11">Eleven</option>      </select>    </div>  </form></div>

How to disable border-radius of bootstrap inputs in Angular

You can add the class rounded-0 to the input

how to customise the bootstrap select dropdown with border radius and appearance change in angular13 without using any plugin

Here you go...

Solution 1:

ngx-bootstrap

See the StackBlitz snippet here.

UPDATE

Solution 2:

ng-bootstrap

See the StackBlitz snippet here.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  clickMessage = 'Choose an option';

  getText(text) {
    this.clickMessage = text;
  }
}

app.component.html

<body class="p-3">
  <div class="row">
    <div class="col">
      <div ngbDropdown class="d-inline-block">
        <button
          type="button"
          class="btn btn-outline-primary"
          id="dropdownBasic1"
          ngbDropdownToggle
        >
          {{ clickMessage }}
        </button>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
          <button
            ngbDropdownItem
            class="nav-link"
            href="#"
            (click)="getText($event.target.innerText)"
          >
            Option 1
          </button>
          <button
            ngbDropdownItem
            class="nav-link"
            href="#"
            (click)="getText($event.target.innerText)"
          >
            Option 2
          </button>
          <button
            ngbDropdownItem
            class="nav-link"
            href="#"
            (click)="getText($event.target.innerText)"
          >
            Option 3
          </button>
        </div>
      </div>
    </div>
  </div>
</body>

app.component.css

.btn {
  width: 200px;
  color: black;
  background-color: white;
  border: 1px solid black;
  border-radius: 10px;
}

button:focus,
button:active {
  color: black;
  background-color: white;
  border: 1px solid black;
  outline: none !important;
  box-shadow: none !important;
}

.dropdown-menu {
  width: 100%;
  border: none;
  box-shadow: 2px 5px 5px #dcdcdc;
  border-radius: 10px;
}

.nav-link {
  color: black;
}

.nav-link:hover,
.nav-link:focus {
  color: black;
  border: none;
}

How to change dropdown box border radius in bootstrap website. (I am using CodeIgniter framework)

Note:- Add Your Class in drop down.

echo form_dropdown('category',$options,'','class="form-control roundedCategory"');

Remove Border Radius from Select Tag in Bootstrap 3