如何從Twitter的Bootstrap創建下拉箭頭？

我一直在檢查/使用Twitter Bootstrap很長一段時間了。我喜歡他們所做的，但更重要的是，我喜歡理解我的所作所爲。如何從Twitter的Bootstrap創建下拉箭頭？

用Chrome的檢查器檢查下拉箭頭後，它似乎實際上是一個↓ html實體。我一直在試圖重現這一點，但沒有成功。我得到一個醜陋的箭頭，而不是簡單的三角形。

什麼是最小的CSS屬性來使用它來重現它？

PS：嘗試重現它的jsFiddle的鏈接。

來源

2011-12-29 i.am.michiel

你能指點我看看你看到的箭頭嗎？鏈接到頁面會很好。 – Sum 2011-12-29 02:05:15

是的，當然，應該首先完成它：http://twitter.github.com/bootstrap/#navigation – 2011-12-29 02:09:47

這是working example。

您不需要額外的↓在您的HTML和border-color是white，使它在白色背景上看不見你的人眼。

來源

2011-12-29 02:19:12

從一開始它就在那裏......：P非常感謝！ – 2011-12-29 02:24:20

沒問題。很高興有幫助！ – 2011-12-29 02:24:45

首先避免默認的瀏覽器樣式。然後用你自己的。舉個例子：

select{ 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 

    height: 60px; 
    border: 1px solid #ccc; 
    padding: 0 0 0 20px; 
    font-size: 18px; 
    font-weight: 300; 
    border-radius: 0; 
    color: #999; 
    letter-spacing: 1px; 
    background: url("../img/[email protected]") calc(100% - 10px) 24px #fff no-repeat; 
    cursor: pointer; 
}

來源

2015-10-21 19:48:30 aUXcoder

如何從Twitter的Bootstrap創建下拉箭頭？

回答

相關問題