只有語義UI下拉圖標？

基於http://jsfiddle.net/t9vfxo5t/我希望顯示語義UI下拉菜單，但最終結果我只想顯示爲標誌，而不是標誌和國家/地區名稱文本。我仍然希望國家名稱在點擊時顯示在下拉列表中。只有語義UI下拉圖標？

我試圖刪除http://jsfiddle.net/Lhzua273/1/中的文本，但它也將其從下拉列表中刪除。

<div class="ui fluid search selection dropdown"> 
    <input type="hidden" name="language"> 
    <div class="default text">Select language</div> 
    <div class="menu"> 
     <div class="item" data-value="gb"><i class="gb flag"></i>English</div> 
     <div class="item" data-value="es"><i class="es flag"></i></div> 
    </div>

任何人都可以提出如何可以實現？

（最終它是這樣的，所以我可以在一個div行中水平排列4個圖標下拉菜單，如圖所示，這樣它們就可以在縱向模式下穿過手機，這樣用戶可以選擇偏好的國家1,2,3和3。 4.我也希望在點擊後每個列表下降時，它們仍然可以放在肖像屏幕內，因此如果列表正好碰到屏幕的右邊緣，則下拉列表的左邊距需要變爲負值。）

來源

2017-03-03 user1946932

你要這樣呢？

<div class="ui compact selection dropdown"> 
    <i class="dropdown icon"></i> 
      <div class="text">FLAG</div> 
      <div class="menu"> 
        <div class="item"><i class="es flag"></i></div> 
        <div class="item"><i class="jp flag"></i></div> 
        <div class="item"><i class="ru flag"></i></div> 
        <div class="item"><i class="cn flag"></i></div> 
      </div> 
    </div>

https://jsfiddle.net/busLpjag/

這是不好的UX，最好使用與國家選擇列表模式。

5（或以上）的下拉列表標誌=您的下拉列表:(

來源

2017-03-04 09:15:59 Rampages

謝謝，但我們也希望國家名稱出現在列表被放下的時候。 – user1946932

我們也計劃放鬆下拉箭頭。 – user1946932

並感謝評論重模態。實際上我們只有7個國家可供選擇。不知道這是否會好嗎？ – user1946932

內滾動條你需要在每個.menu .item元素添加data-text

即：

<div class="item" data-text="Spanish" data-value="es"> 
    <i class="es flag"></i> 
</div>

在這裏看到：http://jsfiddle.net/9t5qapog/2/

我還在JSFid上的每個選項的data-text裏包含了標誌圖標DLE。這不是強制性的。

來源

2017-03-04 16:36:36 NoSoyTsundere

謝謝，但我們實際上是想要這樣做 - 所以只有標誌出現在下拉菜單下，但國名仍然出現在下拉列表中。 – user1946932

只有語義UI下拉圖標？

回答

相關問題