Question

我正在尝试自定义bootstrap vue js b-form-select组件。组件参考在这里：b-form-select

.selectParent {
  width: 150px;
  overflow: hidden;
}

.selectParent select {
  width: 170px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 2px 2px 2px 2px;
  border: none;
  background: transparent;
  background-image: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png'");
  background-repeat: no-repeat;
  background-position: center;
}

<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div class="selectParent">
  <b-form-select v-model="selectedStation" class="mb-3">
    <option :value="0" enabled>-- All Items --</option>
    <option value="a">Option A</option>
    <option value="b">Option B</option>
  </b-form-select>
</div>

某种程度上可以正常工作，但是在单击事件中，它会将样式更改为默认样式。有什么方法可以自定义吗？

期望：

如何自定义bootstrap vue js b-form-select组件

0 个答案: