How to place favicon icon inside select input box
Question
I'm trying to insert a fa-chevron icon inside my dropdown box but it's not working, it's displaying outside the box.
I've tried changing the margins but that doesn't work.
This is when margin-right is set to 200:
And this is without margins:
Code:
<div class="col-md-8 d-flex" style="margin-top: -25px">
<select name="carlist" form="carform" class="form-control" id="exploreNeighbour" style="z-index: 2">
<option value="">I have no idea</option>
{% for venue in venue_category %}
<option value="{{ venue.name }}">{{ venue.name }}</option>
{% endfor %}
</select>
<i class="fas fa-chevron-down" style="pointer-events: none; z-index: 1; margin-right: 20px"></i>
</div>
2 answers
solution1
2 2019-12-26 16:01:06
add z-index: 2; and margin-left: -20px; to fa-chevron-down
solution2
2 2019-12-26 17:04:35
Problem
z-index is a CSS property that has some criteria that must be adhered to:
The element (aka tag) must have
positionat either:relative,absolute, orfixed.Since
<i>is being moved to float over other tags, the parent tag of<i>(ie<div>) needs to haveposition: relativeand the<i>should haveposition: absoluteAny
posab(position: absolute) nested within aposrel(position: relative) can be positioned with properties:left,right,top, andbottom.It appears that OP needs
<i>to move 20px to the left of its original position without disturbing the other tags (ie "floating" )right: 20pxapplied to<i>would move<i>20px left from its parent tag's right border.Also the
margin-top: -25pxapplied to the parent tag looks like an attempt to keep<i>in the middle vertically. If so then addtop: 50%to<i>and removemargin-top: -25pxfromdiv.d-flex.
Demo Features
boilerplate HTML for Bootstrap 4 (includes Font Awesome 5 stylesheet as well)
a
<form>with two<select>.section#rowA.row select#Ais at defaultsection#rowB.row select#Bis a corrected version of the one provided in question.
Corrections
section#B div.col-md-8.d-flex- added
position: relative - removed
margin-top: -25px(see Problem #5 )
- added
section#B i.fas.fa-chevron-down- replaced
margin-right: 20pxwithright: 20px - added
position:absolute
- replaced
both
select- removed
z-index: 2(no idea why that would be useful)
- removed
I added a <select> at default to show how it looks when Bootstrap is properly configured. Do you really need the extra chevron?
<!DOCTYPE html> <html lang='en'> <head> <title>Bootstrap 4 Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" rel="stylesheet" crossorigin="anonymous"> <style> </style> </head> <body> <main class='container-fluid'> <form id='carform' class='form'> <section id='rowA' class='row'> <div class="d-flex col-md-8"> <select id="A" name="carlist" class="form-control" form="carform"> <option value="">I have no idea</option> <option value=""></option> </select> </div> <div class='col-md-4'>Second Column</div> </section> <hr> <section id='rowB' class='row'> <div class="d-flex col-md-8" style="position: relative"> <select id="B" name="carlist" class="form-control" form="carform"> <option value="">I have no idea</option> <option value=""></option> </select> <i class="fas fa-chevron-down" style="pointer-events: none; right: 20px; position: absolute; z-index: 2;"></i> </div> <div class='col-md-4'>Second Column</div> </section> </form> </main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.