Question

143

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

rated 0 times [ 147] [ 4] / answers: 1 / hits: 36876 / 7 Years ago, tue, february 21, 2017, 12:00:00

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.

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaya

Add To Favorites

Follow

Total Points: 531

Total Questions: 107

Total Answers: 100

Location: United States Minor Outlying Island

Member since Sat, May 28, 2022

2 Years ago

answered 7 Years ago masonm · Accepted Answer

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