Question

我正在使用selectpicker插件，我正在尝试更改向下箭头图标。我尝试使用CSS但它没有用。我怎么能改变那个图标？

ath_rx_tasklet()

<select class="form-control selectpicker" data-hide-disabled="true" data-show-subtext="true" data-live-search="true">
    <option value="" disabled selected></option>
    <option value="update" data-subtext="old subtext">Update subtext</option>
    <option value="delete" data-subtext="more subtext">Delete subtext</option>
</select>

CSS

.bootstrap-select.btn-group .dropdown-toggle .caret {
    display: none;
}

Answer 1

这取决于你想要改变它的内容，但是目前插入来自这个CSS，它给它零大小但是应用边框来模仿向下箭头：

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid\9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

您可以将其更改为绿色方块，例如：

.bootstrap-select.btn-group .dropdown-toggle .caret {
  width: 10px;
  height: 10px;
  border: none;
  background-color: green;
}

示范小提琴：http://jsfiddle.net/pvT8Q/460/

或者您可以使用Bootstrap Glyphicons：

.bootstrap-select.btn-group .dropdown-toggle .caret {
  width: 10px;
  height: 10px;
  border: none;
  font-family: 'Glyphicons Halflings';
}

.bootstrap-select.btn-group .dropdown-toggle .caret:before {
  content: "\e003";
}

示范小提琴：http://jsfiddle.net/pvT8Q/461/ （我把定位留给你）

Answer 2

js fiddle example here here

//select box arrow icon with pure css
.select-toggle{
   position: relative;
   display: inline-block;
   background:white;
   border:1px solid red;
}

.select-toggle::after{
  position: absolute;
  top: 10px;
  right: 5px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #023F55;
  content: "";
  pointer-events: none;
}

.select-toggle select{
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

<div class="select-toggle">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

Answer 3

以下是您可以用来更改下拉插入符号图标的小提琴链接：https://jsfiddle.net/vivek1313/0xugbrat/

<div class="selection-wrapper" onclick="toggleUpDown()">

<select name="list" id="languageDropdown" class='selection'>
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
  <option value="Mango">Mango</option>
</select>
<div id="caret" class="triangle triangle-up"></div>
</div>
<script>
var triangleEl = document.getElementById('caret');
var languageDropdown = document.getElementById('languageDropdown');
function toggleUpDown() {

    if(!triangleEl.classList.contains('triangle-up')){
    showDownArrow();
  } else {
     showUpArrow();
  }

} 


 function showUpArrow() {
   triangleEl.classList.remove('triangle-up');
    triangleEl.classList.add('triangle-down')
 }

function showDownArrow() {
    triangleEl.classList.remove('triangle-down');
      triangleEl.classList.add('triangle-up')
}
languageDropdown.addEventListener('blur',toggleUpDown)
</script>

.selection-wrapper {
  position: relative;
  width: 30%;
}
.selection {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding:5px;
  position: relative;
  content:'';
}

.triangle{
  position: absolute;
  top: 30%;
  right: 5px; 
  width: 0;
  height: 0;
  content: "";
  pointer-events: none;
  z-index:5;
}

.triangle-up {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #023F55;

}

.triangle-down {
  top: 10%;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid transparent;
  border-bottom: 6px solid  #023F55;
}

更改插入符号图标

3 个答案: