如何从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创建下拉箭头？

回答

相关问题