CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapbootstrap-4
user5638822
user5638822

Reputation:

How to edit the select form arrow? (Bootstrap 4)

I am working on a form with Bootstrap 4 and I would like to edit/change the style of the arrow select element from the first version to the second version as depicted below.

enter image description here

I tried different ways (as seen in this community citations needed) to edit the arrow but I had no success.

Could someone help me by explaining how I could achieve the desired result?

Please find bellow an example of my HTML for the problem.

<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>

Upvotes: 15

Views: 41006

Answers (8)

Alex W
Alex W

Reputation: 38253

In Bootstrap 5, you can do this with SASS now:

$form-select-indicator-color: $primary;

Upvotes: 0

Simone Anthony
Simone Anthony

Reputation: 716

@user5638822's answer is correct. It is just incomplete...

In order to edit/replace the select dropdowns icon, class="custom-select" is needed.

<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>

Link: https://v4-alpha.getbootstrap.com/components/forms/#select-menu

Then, you need to select .custom-select and replace the background-image using a url...

.custom-select {
    /* this url produces a down pointing arrow, replace it with your needed icon*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}



If you have an HTML icon like this...

<i class="bi bi-caret-down-fill"></i>

It will need to be converted into a URL. This URL can then be used in the background-image: url("");


  1. In order to convert the HTML Icon into a URL, you will then need to copy the svg version of the icon (from the website you retrieved the icon from).

example icon sites...

https://icons.getbootstrap.com/icons/caret-down-fill/

https://fontawesome.com/icons/caret-down?f=classic&s=solid

It will look like this...

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
  <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
</svg>


  2. Then, you need to paste the svg into a URL-encoder for SVG. (Read More: Using background image css for bootstrap icons)

convert icon to css background image



  3. Copy the "Ready for css" and enjoy!

Upvotes: 0

Satyam
Satyam

Reputation: 9

Put this in your css file

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;
}

Upvotes: 1

Long Tran
Long Tran

Reputation: 2235

Since Bootstrap allows us to custom via variables. In this case, I would suggest to define icon via $custom-select-indicator variable.

$custom-select-indicator: url(path-to-icon) !default;

Upvotes: 1

Andreas Gusakov
Andreas Gusakov

Reputation: 73

The .custom-select class is already there (Bootstrap 4). To change the arrow of the select input you just override the background property. So for example:

.custom-select { background: none; }

removes the arrow.

Upvotes: 3

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

If you could use Select2, the solution will be simple by adding costum class like :

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

Hope this helps.

$("#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>

Upvotes: 1

hdotluna
hdotluna

Reputation: 5732

Just an example. You can use it as reference.

In this example you will learn the way to custom the selectbox. However, in my experience. Old browsers doesn't support this method.

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>

Hope it helps!

Upvotes: 24

user5638822
user5638822

Reputation:

I have found the answer on the same 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>

Link: https://v4-alpha.getbootstrap.com/components/forms/#select-menu

Thank you for the help anyway

Upvotes: -2

Related Questions