如何在Chosen-Select上删除边框半径？

Question

我有一个表单，我正在使用https://gist.github.com/koenpunt/6424137中的bootstrap 3主题：我也在使用Chosen-Select from https://harvesthq.github.io/chosen/，但是所选的select的边框有半径，我尝试操作css的半径，但我不能，这是图像：

Answer 1

只需将border-radius更改为0.

当前border-radius: 4px;请参阅示例中的注释CSS，了解可以/应该更改以保持一致性的所有border-radius规则。

$('.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>