4

I want to add this icon to a simple Bootstrap 4 select. So it looks more like a dropdown. How can I do this?

This is my code so far:

.custom-select {
  background-color: #009CFF;
  color: #fff;
  text-transform: uppercase;
  background-image: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div>
  <select class="custom-select rounded-0 border-0">
    <option selected>Select</option>
    <i class="fa fa-angle-down" aria-hidden="true"></i>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

The snippet is for some reason not showing changes as my editor is. So here, have it in codepen version too. Anyway, I've tried adding it in like this, too, but it's not working: 

.custom-select:after {
  content: "\f107";
  font-family: FontAwesome;
}

Can someone help me out? Thanks!

Retros
  • 3,511
  • 10
  • 40
  • 60
  • If that is the icon, why the style is `content: "\25AE";` and not `content: "\f107 ";`? – Alon Eitan Jul 12 '17 at 19:42
  • like this : https://jsfiddle.net/m5ucsneo/1/ – Minar Mnr Jul 12 '17 at 19:42
  • @AlonEitan Wrong content, sorry. But it doesn't really matter, as long as it works, I can change the content icon. – Retros Jul 12 '17 at 20:03
  • @MinarMnr I don't understand? Where does the font awesome icon go? – Retros Jul 12 '17 at 20:04
  • I know you prefer a Font Awesome solution, but given that `.custom-select` creates this icon via `background-image` have you considered a similar approach? Using pseudo classes doesn't seem to solve the issue, I assume because of how Bootstrap handles the customizations. – Robert Jul 12 '17 at 20:27
  • Possible duplicate of [I want to change the select icon/dropdown icon to (fa-chevron-down). How can I?](https://stackoverflow.com/questions/30646923/i-want-to-change-the-select-icon-dropdown-icon-to-fa-chevron-down-how-can-i) – Yadhu Babu Jul 13 '17 at 04:26
  • check this [link]https://stackoverflow.com/questions/30646923/i-want-to-change-the-select-icon-dropdown-icon-to-fa-chevron-down-how-can-i – Yadhu Babu Jul 13 '17 at 04:27
  • @RobertC That's a good idea, actually! Thank you! Let's see if I can style it properly. Lol! – Retros Jul 13 '17 at 08:51

2 Answers2

4

This might be what you are looking for bootstrap-select.

html:

<div class="container">
    <div class="row">
        <div class="col-4">
            <select id="mySelect" data-show-content="true" class="form-control">
                <option>Select..</option>
                <option data-content="<i class='fa fa-cutlery'></i> Cutlery"></option>
                <option data-content="<i class='fa fa-eye'></i> Eye"></option>
                <option data-content="<i class='fa fa-heart-o'></i> Heart"></option>
                <option data-content="<i class='fa fa-leaf'></i> Leaf"></option>
                <option data-content="<i class='fa fa-music'></i> Music"></option>
                <option data-content="<i class='fa fa-star'></i> Star"></option>
                <option data-content="<span class='badge badge-warning mt-1 ml-2 float-right'>3</span> More"></option>
            </select>
        </div>
    </div>
</div>

js:

$('#mySelect').selectpicker();
krizajb
  • 1,715
  • 3
  • 30
  • 43
1

As explained here it's not possible to style a HTML select element, and that includes using pseudo :after and :before.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624