Удалить выпадающий значок проблемы - PullRequest
Новая
       9

Удалить выпадающий значок проблемы

0 голосов
/ 08 февраля 2019

Я прошел через множество различных решений этой проблемы, которые, кажется, не работают для меня.Я уверен, что это потому, что я использую CSS-фреймворк, Bulma, который имеет тенденцию принимать некоторые вещи в неправильном направлении.

Я пытаюсь удалить выпадающий значок из выпадающегоменю и заменить его изображением.У меня есть изображение, показывающее, но я не могу заставить стрелку по умолчанию скрывать / удалять.

<div class="control">
 <div id="newAd-Preview" class="select">
  <select>
   <option >
    test
   </option>
   <option>Key</option>
   <option>Hello</option>
  </select>
 </div>
</div>

Вот jsfiddle с некоторыми решениями, которые я нашел, но, похоже, не работает.Это также уже связано с булмой.https://jsfiddle.net/uxgdp3b9/

1 Ответ

0 голосов
/ 08 февраля 2019

Добавить это определение: 

.select:not(.is-multiple):not(.is-loading)::after {
    background: url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.4.8/collection/icon/svg/ios-arrow-dropdown.svg") no-repeat;
    transform: rotate(0);
    border: none;  
    width: 20px;  
    background-position: 50%;
    top: 0;
    bottom: 0;
    right: 5px;
    margin: 0;
    height: auto;
}


.select {
  display: inline-block;
  max-width: 150px;
  position: relative;
  vertical-align: top;

}

select::-ms-expand
{
        display: none;
}

.select:not(.is-multiple) {
  height: 2.25em;
}

.select:not(.is-multiple):not(.is-loading)::after {
  background: url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.4.8/collection/icon/svg/ios-arrow-dropdown.svg") no-repeat !important;
  transform: rotate(0) !important;
  border: none !important;  
  width: 20px !important;  
  background-position: 50% !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 5px !important;
  margin: 0 !important;
  height: auto !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet"/>
<div class="control">
  <div id="newAd-Preview" class="select">
    <select>
      <option >
        test
      </option>
      <option>Key</option>
      <option>Hello</option>
    </select>
  </div>
</div>

Примечание: Мне нужно было добавить флаги !important, потому что фрагмент SO не включает файл CSS в заголовке.Если ваш CSS-файл Bulma переопределен вашим CSS-файлом, вам не нужны флаги !important.

...