Как отредактировать стрелку выбора формы? (Bootstrap 4)

ProgramBox

Как отредактировать стрелку выбора формы? (Bootstrap 4)

Post author:admin
Запись опубликована:28 июня, 2022
Post category:Вопросы по программированию

#javascript #css #bootstrap-4 #frontend #bootstrap-selectpicker

Вопрос:

Я работаю над формой с Bootstrap 4, и я хотел бы отредактировать / изменить стиль элемента выбора стрелки с первой версии на вторую версию, как показано ниже.

Я пробовал разные способы (как показано в этом сообществе, необходимы ссылки) для редактирования стрелки, но у меня не было успеха.

Может ли кто-нибудь помочь мне, объяснив, как я мог бы достичь желаемого результата?

Пожалуйста, найдите ниже пример моего HTML для решения проблемы.

 <head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="Description" name="description">
  <meta content="index,follow" name="robots">
  <link href="/images/myicon.png" rel="icon" type="image/png">
  <title>TITLE HERE</title>
  <!--CSS-->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>


  <div class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

</body>

1. Вы должны использовать некоторый пользовательский select выпадающий список, например, selectyze, select2 и т. Д. Затем вы можете настроить внешний вид с помощью css.

2. вы не можете изменить его поведение по умолчанию .. используйте другой сторонний инструмент для вашего требования

3. попробуйте, это поможет margin-top:10px; border-top:15px red solid; border-right: 15px transparent solid; border-left: 15px transparent solid; border-bottom:15px transparent solid;

4. Да, вы можете это изменить.. Я нашел ответ здесь v4-alpha.getbootstrap.com/components/forms/#select-menu

Ответ №1:

Просто пример. Вы можете использовать его в качестве ссылки.

В этом примере вы узнаете, как настроить поле выбора. Однако, по моему опыту. Старые браузеры не поддерживают этот метод.

 select {
  background-image:
    linear-gradient(45deg, transparent 50%, red 60%),
    linear-gradient(135deg, red 40%, transparent 50%) !important;
  background-position:
    calc(100% - 30px) 14px,
    calc(100% - 20px) 14px,
    100% 0;
  background-size:
    10px 10px,
    10px 10px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

<div class="form-group">
  <label for="exampleSelect1">Example select</label>
  <select class="form-control" id="exampleSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Надеюсь, это поможет!

Ответ №2:

Класс .custom-select уже существует (Bootstrap 4). Чтобы изменить стрелку ввода выбора, вы просто переопределяете свойство background. Так, например:

 .custom-select { background: none; }

удаляет стрелку.

Ответ №3:

Если бы вы могли использовать Select2, решение было бы простым, добавив класс costum, например :

 $("#myList").select2({
     containerCssClass: "customClass"
});

Надеюсь, это поможет.

 $("#myList").select2({
     containerCssClass: "customClass"
 });

 /* select2 version 4.0.0 Beta 2 */
.select2-container--default .customClass.select2-selection--single{
  border-radius: 24px;
  height: 40px;
  padding-top: 5px;
}

.select2-container--default .customClass.select2-selection--single .select2-selection__arrow b{
  border-color: #00b37c transparent transparent transparent;
  border-width: 8px 8px 0 8px;
  margin-left: -22px;
}

.select2-container--default.select2-container--open .customClass.select2-selection--single .select2-selection__arrow b{
  border-color: transparent transparent #00b37c;
  border-width: 0px 8px 8px;
  margin-left: -22px;
}

.select2-container--default .customClass.select2-selection--single .select2-selection__arrow{
  padding-top: 5px;
  height: 35px;
}

.select2-container--default .customClass.select2-selection--single .select2-selection__rendered{
  color: #00b37c;
  font-family: monospace;
  font-size: 16px;
  margin-left: 8px;
  height: 40px;
}

 <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>


<select id="myList" style="width:300px">
  <option value="A">Protection Form</option>
  <option value="B">Option 2</option>
  <option value="C">Option 3</option>
  <option value="D">Option 4</option>
</select>

Ответ №4:

Поскольку Bootstrap позволяет нам настраивать с помощью переменных. В этом случае я бы предложил определить значок с помощью переменной $custom-select-indicator .

 $custom-select-indicator: url(path-to-icon) !defau<

Ответ №5:

Поместите это в свой файл css

 select {
  background-image:url("url of icon") !important;
  background-position:calc(100% - 20px) 14px,100% 0;
  background-size:20px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
}

Ответ №6:

Я нашел ответ на том же Bootstrap 4

 <select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Ссылка: https://v4-alpha.getbootstrap.com/components/forms/#select-menu

В любом случае спасибо за помощь