图标里面选择之前选择

Question

预期成果： 选项

之前的图标

目前的结果： 图标在哪里？

如何在Please Select...或所选选项之前显示图标？

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

Answer 1

我认为你的主要问题是你无法看到图标。所以这里如果你使用bootstrap，例如：<span class="glyphicon glyphicon-user"></span> 在这种情况下，您尚未添加bootstrap.min.css, bootstrap.min.js这些都需要包含以加载您的图标。

以下是Icon可见的副本https://codepen.io/nabanitadasgupta/pen/yzPbjW。如果你愿意，我也可以设置图标位置。

Answer 2

立即检查

你必须添加bootstrap.min.css，jquery.min.js＆amp; bootstrap.min.js文件并设置此css，它将完成

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