Html 插入符号或下箭头未出现在选择标记中

我试图在表单中的

select

上放置插入符号或向下箭头。我尝试了很多，但它没有出现在选择框中。有人能帮忙吗

HTML:

<div class="form-group">
   <label class="control-label col-sm-3" id="label_form">Category</label>
   <div class="col-sm-4 ">
     <select class="form-control input-lg" name="category" id="category">
        <option>ONE</option>
        <option>TWO</option>
     </select>
   </div>
 </div>

.form-control{
     padding:9px 18px 9px 12px !important;
     margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
     border-radius:4px;
     -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
     box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
     background: #f8f8f8;
     color:#888;
     border-color: #66afe9;
     outline:none;
     display: inline-block;
     -webkit-appearance:none;
     -moz-appearance:none;
     appearance:none;
     cursor:pointer;
     color: #555;
     font-size: 14px;
     height: 40px !important;
     display: block;
}

当前视图：

<div class="form-group">
   <label class="control-label col-sm-3" id="label_form">Category</label>
   <div class="col-sm-4 ">
     <select class="form-control input-lg" name="category" id="category">
        <option>ONE</option>
        <option>TWO</option>
     </select>
   </div>
 </div>

.form-control{
     padding:9px 18px 9px 12px !important;
     margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
     border-radius:4px;
     -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
     box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
     background: #f8f8f8;
     color:#888;
     border-color: #66afe9;
     outline:none;
     display: inline-block;
     -webkit-appearance:none;
     -moz-appearance:none;
     appearance:none;
     cursor:pointer;
     color: #555;
     font-size: 14px;
     height: 40px !important;
     display: block;
}

预期视图：

<div class="form-group">
   <label class="control-label col-sm-3" id="label_form">Category</label>
   <div class="col-sm-4 ">
     <select class="form-control input-lg" name="category" id="category">
        <option>ONE</option>
        <option>TWO</option>
     </select>
   </div>
 </div>

.form-control{
     padding:9px 18px 9px 12px !important;
     margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
     border-radius:4px;
     -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
     box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
     background: #f8f8f8;
     color:#888;
     border-color: #66afe9;
     outline:none;
     display: inline-block;
     -webkit-appearance:none;
     -moz-appearance:none;
     appearance:none;
     cursor:pointer;
     color: #555;
     font-size: 14px;
     height: 40px !important;
     display: block;
}

---

从样式中删除

外观

属性。检查。我用外观做的，但我不喜欢默认向下箭头的结果。我想用更好的箭。例如，就像我给出的图像中的箭头一样。你有什么建议吗？我试着把带有垃圾邮件标签的插入符号类放在select标签之前，select标签之后，但没有出现。我不知道该怎么办。@MuhammadUsman你能帮我吗？详细的答案请看这个。