CODEWITHSUNDEEP
htmlcss
VLeonovs
VLeonovs

Reputation: 2251

icon inside select before option

Expected Result: Icon before Option

1

Current Result: Where is the icon?

2

How to display Icon before Please Select... or selected option ?

.selectDropDown {
    height: 5em;
    width: 30em;
    background: #f3f3f3;
    border: 1px solid #d2d8d8;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    padding: 16px 20px 16px 50px;
}
<p class="fieldset">
  <div class="form-group">
    <i class="glyphicon glyphicon-menu-down"></i>
    <select class="form-control selectDropDown" id="sel1">
      <option value="" disabled selected hidden>Please select...</option>
      <option>option 1</option>
      <option>option 2</option>
      <option>option 3</option>
    </select>
  </div>
</p>

Upvotes: 1

Views: 1537

Answers (2)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Check Now

you have to add bootstrap.min.css, jquery.min.js & bootstrap.min.js file and set this css and it will done

.posab{
        position: absolute!important;
        top: 28px!important;
        left: 10px !important;}


        .form-control.selectDropDown {
    height: 5em;
    width: 30em;
    background: #f3f3f3;
    border: 1px solid #d2d8d8;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    padding: 16px 20px 16px 50px;
    opacity:0.7;
}
.form-group{
position:relative;}
.posab{
    position: absolute!important;
    top: 28px!important;
    left: 10px !important;
    z-index:-1;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p class="fieldset">
  <div class="form-group">
    <i class="glyphicon glyphicon-user posab"></i>
    <select class="form-control selectDropDown" id="sel1">
      <option value="" disabled selected hidden>Please select...</option>
      <option>option 1</option>
      <option>option 2</option>
      <option>option 3</option>
    </select>
  </div>
</p>

Upvotes: 0

All about JS
All about JS

Reputation: 562

I think your primary question was you are unable to see the icon . So here if you are using bootstrap eg:<span class="glyphicon glyphicon-user"></span> In that case, you have not added bootstrap.min.css, bootstrap.min.js These are needed to include to load your icon.

Here is the copy where Icon is visible https://codepen.io/nabanitadasgupta/pen/yzPbjW. If you want I can make the icon position as well as.

Upvotes: 1

Related Questions