Search code examples
javascriptjquerycsstwitter-bootstrapbootstrap-4

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

  • 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