选择选项中的字体真棒图标 [英] font awesome icon in select option

问题描述

我尝试为下面的图片中的第一个选项添加一个插入符号向下图标：

这里是一个小提琴与我的例子： https://jsfiddle.net/wwut6apr/30/

我无法在上面的提琴上看到图标。

和相应的代码：

  .wrapper {height：200px;背景颜色：红色; padding-top：100px; padding-left：150px;}＃before-select {font-size：30px;颜色：#ffffff;} select {border：none;背景：透明; / * background-color：blue; * / -webkit-appearance：none; -moz-appearance：none;外观：无; width：180px; padding-top：0px; background-size：20px;颜色：#ffffff; font-size：30px;}选择选项{color：＃424146;背景：#ffffff;}  

< link rel = stylesheettype =text / csshref =https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css/>< link rel =stylesheethref =https： //maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css/>< div class =wrapper> < form role =form> < / span>< span id =before-select> < select name =town> < option value =London> London< i class =fa fa-caret-downaria-hidden =true>< / i> < /选项> < option value =Paris> Paris< / option> < option value =Madrid>马德里< / option> < /选择> < / form>< / div>< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js> ;< / script>< script type =text / javascriptsrc =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script>




解决方案

在选项标签中添加 i 标签，因为标签被剥离。

但您可以在选择 像这样

I try to add a caret down icon to the first selection of several options as shown on the picture below:

here is a Fiddle with my example: https://jsfiddle.net/wwut6apr/30/

I can't get the icon to be visible on the Fiddle above.

And the corresponding code:

.wrapper {
  height: 200px;
  background-color: red;
  padding-top: 100px;
  padding-left: 150px;
}
#before-select {
  font-size: 30px;
  color: #ffffff;
}
select {
  border: none;
  background: transparent;
  /*background-color: blue;*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 180px;
  padding-top: 0px;
  background-size: 20px;
  color: #ffffff;
  font-size: 30px;
}
select option {
  color: #424146;
  background: #ffffff;
}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<div class="wrapper">

  <form role="form">
    <span id="before-select">in</span>

    <select name="town">
      <option value="London">London <i class="fa fa-caret-down" aria-hidden="true"></i>
      </option>
      <option value="Paris">Paris</option>
      <option value="Madrid">Madrid</option>
    </select>


  </form>


</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

解决方案

You can't add i tag in option tag because tags are stripped.

But you can add it after the select like this

这篇关于选择选项中的字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！