blocks|key|223415|text|我不认为标准的HTML+select会显示HTML内容。我建议查看Bootstrap+select：http://silviomoreto.github.io/bootstrap-select/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|223416|它有几个用于在select中显示图标或其他HTML标记的选项。|223417|<select+id="mySelect"+data-show-icon="true">
++<option+data-content="<i+class='glyphicon+glyphicon-cutlery'></i>">-</option>
++<option+data-subtext="<i+class='glyphicon+glyphicon-eye-open'></i>"></option>
++<option+data-subtext="<i+class='glyphicon+glyphicon-heart-empty'></i>"></option>
++<option+data-subtext="<i+class='glyphicon+glyphicon-leaf'></i>"></option>
++<option+data-subtext="<i+class='glyphicon+glyphicon-music'></i>"></option>
++<option+data-subtext="<i+class='glyphicon+glyphicon-send'></i>"></option>
++<option+data-subtext="<i+class='glyphicon+glyphicon-star'></i>"></option>
</select>|code-block|syntax|javascript|223418|这是一个演示：https://www.codeply.com/go/l6ClKGBmLS|223419|entityMap|0|LINK|mutability|MUTABLE|url|http://silviomoreto.github.io/bootstrap-select/|1|https://www.codeply.com/go/l6ClKGBmLS^0|1E|1B|0|0|0|0|7|11|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>I don't think the standard HTML select will display HTML content. I'd suggest checking out Bootstrap select: <a href="http://silviomoreto.github.io/bootstrap-select/" rel="noreferrer">http://silviomoreto.github.io/bootstrap-select/</a></p>

<p>It has several options for displaying icons or other HTML markup in the select.</p>

<pre><code>&lt;select id="mySelect" data-show-icon="true"&gt;
  &lt;option data-content="&lt;i class='glyphicon glyphicon-cutlery'&gt;&lt;/i&gt;"&gt;-&lt;/option&gt;
  &lt;option data-subtext="&lt;i class='glyphicon glyphicon-eye-open'&gt;&lt;/i&gt;"&gt;&lt;/option&gt;
  &lt;option data-subtext="&lt;i class='glyphicon glyphicon-heart-empty'&gt;&lt;/i&gt;"&gt;&lt;/option&gt;
  &lt;option data-subtext="&lt;i class='glyphicon glyphicon-leaf'&gt;&lt;/i&gt;"&gt;&lt;/option&gt;
  &lt;option data-subtext="&lt;i class='glyphicon glyphicon-music'&gt;&lt;/i&gt;"&gt;&lt;/option&gt;
  &lt;option data-subtext="&lt;i class='glyphicon glyphicon-send'&gt;&lt;/i&gt;"&gt;&lt;/option&gt;
  &lt;option data-subtext="&lt;i class='glyphicon glyphicon-star'&gt;&lt;/i&gt;"&gt;&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Here is a demo: <a href="https://www.codeply.com/go/l6ClKGBmLS" rel="noreferrer">https://www.codeply.com/go/l6ClKGBmLS</a></p>


blocks|key|6869|text|我最终使用了bootstrap+3下拉按钮，我在这里发布了我的解决方案，以防将来对某人有帮助。将bootstrap+3+list-inline添加到ul的类中会使它以一种非常紧凑的格式显示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6870|<div+class="btn-group">
++++<button+type="button"+class="btn+btn-default+dropdown-toggle"+data-toggle="dropdown">
++++++++Select+icon+<span+class="caret"></span>
++++</button>
++++<ul+class="dropdown-menu+list-inline"+role="menu">
++++++++<li><span+class="glyphicon+glyphicon-cutlery"></span></li>
++++++++<li><span+class="glyphicon+glyphicon-fire"></span></li>
++++++++<li><span+class="glyphicon+glyphicon-glass"></span></li>
++++++++<li><span+class="glyphicon+glyphicon-heart"></span></li>++++++++++
++++</ul>
</div>|code-block|syntax|javascript|6871|我使用的是Angular.js，所以这是我实际使用的代码：|6872|<div+class="btn-group">
++++++++++++<button+type="button"+class="btn+btn-default+dropdown-toggle"+data-toggle="dropdown">
++++++++++++++++Avatar+<span+class="caret"></span>
++++++++++++</button>
++++++++++++<ul+class="dropdown-menu+list-inline"+role="menu">
++++++++++++++++<li+ng-repeat="avatar+in+avatars"+ng-click="avatarSelected(avatar)">
++++++++++++++++++++<span+ng-class="getAvatar(avatar)"></span>
++++++++++++++++</li>
++++++++++++</ul>
++++++++</div>|6873|在我的控制器中：|6874|$scope.avatars=['cutlery','eye-open','flag','flash','glass','fire','hand-right','heart','heart-empty','leaf','music','send','star','star-empty','tint','tower','tree-conifer','tree-deciduous','usd','user','wrench','time','road','cloud'];

$scope.getAvatar=function(avatar){
+++++return+'glyphicon+glyphicon-'%2Bavatar;
};|6875|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I ended up using the bootstrap 3 dropdown button, I'm posting my solution here in case it helps someone in future.  Adding the bootstrap 3 list-inline to the class for the ul causes it to display in a nicely compact format as well.</p>

<pre><code>&lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
        Select icon &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu list-inline" role="menu"&gt;
        &lt;li&gt;&lt;span class="glyphicon glyphicon-cutlery"&gt;&lt;/span&gt;&lt;/li&gt;
        &lt;li&gt;&lt;span class="glyphicon glyphicon-fire"&gt;&lt;/span&gt;&lt;/li&gt;
        &lt;li&gt;&lt;span class="glyphicon glyphicon-glass"&gt;&lt;/span&gt;&lt;/li&gt;
        &lt;li&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt;&lt;/li&gt;          
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>I'm using Angular.js so this is the actual code I used:</p>

<pre><code>&lt;div class="btn-group"&gt;
            &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
                Avatar &lt;span class="caret"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;ul class="dropdown-menu list-inline" role="menu"&gt;
                &lt;li ng-repeat="avatar in avatars" ng-click="avatarSelected(avatar)"&gt;
                    &lt;span ng-class="getAvatar(avatar)"&gt;&lt;/span&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
</code></pre>

<p>And in my controller: </p>

<pre><code>$scope.avatars=['cutlery','eye-open','flag','flash','glass','fire','hand-right','heart','heart-empty','leaf','music','send','star','star-empty','tint','tower','tree-conifer','tree-deciduous','usd','user','wrench','time','road','cloud'];

$scope.getAvatar=function(avatar){
     return 'glyphicon glyphicon-'+avatar;
};
</code></pre>


blocks|key|223512|text|据我所知，在原生select中实现这一点的唯一方法是使用字体的unicode表示。您必须将字形图标字体应用于选择，因此不能将其与其他字体混合。但是，字形图标包括常规字符，因此您可以添加文本。不幸的是，为单个选项设置字体似乎是不可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|223513|<select+class="form-control+glyphicon">
++++<option+value="">&#x2212;+&#x2212;+&#x2212;+Hello</option>
++++<option+value="glyphicon-list-alt">&#xe032;+Text</option>
</select>|code-block|syntax|javascript|223514|以下是图标及其unicode的列表：|223515|http://glyphicons.bootstrapcheatsheets.com/|offset|length|223516|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|17|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

<p>To my knowledge the only way to achieve this in a native select would be to use the unicode representations of the font. You'll have to apply the glyphicon font to the select and as such can't mix it with other fonts. However, glyphicons include regular characters, so you can add text. Unfortunately setting the font for individual options doesn't seem to be possible.</p>

<pre><code>&lt;select class="form-control glyphicon"&gt;
    &lt;option value=""&gt;&amp;#x2212; &amp;#x2212; &amp;#x2212; Hello&lt;/option&gt;
    &lt;option value="glyphicon-list-alt"&gt;&amp;#xe032; Text&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Here's a list of the icons with their unicode:</p>

<p><a href="http://glyphicons.bootstrapcheatsheets.com/">http://glyphicons.bootstrapcheatsheets.com/</a></p>


blocks|key|223560|text|如果使用字形图标作为字符串的第一个字符，则可以使用html+char+(请参见https://glyphicons.bootstrapcheatsheets.com/)，然后将字体应用于元素的第一个字符：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|223561|++++option::first-letter{
++++++++font-family:+Glyphicons+Halflings;
++++}|code-block|syntax|javascript|223562|entityMap|0|LINK|mutability|MUTABLE|url|https://glyphicons.bootstrapcheatsheets.com/^0|13|18|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>If you are using the glyphicon as the first character of the string, you can use the html char (see <a href="https://glyphicons.bootstrapcheatsheets.com/" rel="nofollow noreferrer">https://glyphicons.bootstrapcheatsheets.com/</a>) and then apply the font to the first character of the element:</p>

<pre><code>    option::first-letter{
        font-family: Glyphicons Halflings;
    }
</code></pre>


<p>I need to make a subset of the Bootstrap 3 glyphicons selectable in my ui by the user.</p>

<p>I tried this:</p>

<pre><code>&lt;select class="form-control"&gt;
  &lt;option&gt;&lt;span class="glyphicon glyphicon-cutlery"&gt;&lt;/span&gt;&lt;/option&gt;
  &lt;option&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt;&lt;/option&gt; 
  &lt;option&gt;&lt;span class="glyphicon glyphicon-heart-empty"&gt;&lt;/span&gt;&lt;/option&gt;
  &lt;option&gt;&lt;span class="glyphicon glyphicon-leaf"&gt;&lt;/span&gt;&lt;/option&gt;
  &lt;option&gt;&lt;span class="glyphicon glyphicon-music"&gt;&lt;/span&gt;&lt;/option&gt;
  &lt;option&gt;&lt;span class="glyphicon glyphicon-send"&gt;&lt;/span&gt;&lt;/option&gt;
  &lt;option&gt;&lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>However all I get are blank lines.  Any help or alternative suggestions appreciated.</p>


How to use a Bootstrap 3 glyphicon in an html select

我需要让用户在我的ui中选择Bootstrap 3字形图标的一个子集。我试过这个：<select class="form-control">  <option><span class="glyphicon glyphicon-cutlery"></span></option>  <option><span class=...

问如何在html select中使用Bootstrap 3字形图标
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html select中使用Bootstrap 3字形图标EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html select中使用Bootstrap 3字形图标
EN