Question

好的，我正在尝试在我的选择标记中放置一个字体很棒的图标，因为由于Safari的行为，我无法保留默认图标。默认的一个让我脱掉风格：

-webkit-appearance:none;

问题是这也删除了选择箭头。这就是我尝试使用font-awesome的原因。问题是我根本无法将我的字体真棒图标放在我的选择框中。

有人可以提供帮助吗？

这是我的代码：

＆＃13;

select {
  color: #9b9b9b;
  border: 1px solid #9b9b9b;
  font-family: SF-UI-Text-Regular;
  background-color: white;
  background: none;
  -webkit-appearance: none;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  width: 90%;
  height: 40px;
  background: #fff;
  font-weight: 400;
  line-height: 27px;
  margin-bottom: 20px;
  transition: all 0.35s ease-out;
  -webkit-transition: all 0.35s ease-out;
  text-transform: uppercase;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="col-md-12">
  <input placeholder="E-mail" class="input-field" name="email" required type="email" >
  <i class="fa fa-caret-down" aria-hidden="true"></i>
  <select class="col-md-12 fix-padding fa-select" required name="option">
    <option value="" disabled selected>Budget</option>
    <option value="$25,000 to $50,000">$25,000 to $50,000</option>
    <option value="$50,000 to $100,000">$50,000 to $100,000</option>
    <option value="$100,000 to $200,000">$100,000 to $200,000</option>
    <option value="Over $200,000">Over $200,000</option>
    <option value="Undefined">Undefined</option>
  </select>
</div>

＆＃13;

选择标记html问题

0 个答案: