Question

我看到了一些像这样的漂亮风格的下拉框，想要创建我自己的下拉框：

enter image description here

创建箭头的CSS非常简单。它只是将一个unicode字符作为内容添加到元素的前面：

.select:before{
    content: "\f0d7";
}

我自己尝试了，但是没有显示角色，因为角色不包含在像Arial这样的默认语言中：

http://jsfiddle.net/3cW9M/

我当然可以包含一个包含这个字符的字体，但是我觉得要为该错误添加另一个~100kb的页面需要很多开销。

在没有其他字体或图像的情况下，是否有其他良好的解决方案可以归档此箭头样式？

Answer 1

您可以使用其他unicode或使用边框：的 DEMO

.select:before{ content: "\25be or \25bc ? "; float:right; color:gray; } .select:after{ content: ""; margin:0 0.5em; display:inline-block; border: 7px solid transparent; border-top:8px solid gray; border-bottom:0 none; }

Answer 2

改为使用\25bc。

如果你想改变颜色，只需添加css颜色属性。

.select:before{
    content: "\25bc";
    color: gray;
}

Answer 3

所有CSS方法

 .arrow-down {
     height:0px;
     width:0px;
     border:none;
     border-top:5px solid #000000;
     border-left:5px solid rgba(0,0,0,0);
     border-right:5px solid rgba(0,0,0,0);
}

http://jsfiddle.net/2sU2x/2/

Answer 4

对于那一箭，你对100kb的估计有点偏。您可以使用例如http://icomoon.io/从应用程序所需的符号编译字体。我可以，估计箭头会生成大约1kB的字体。

如果您考虑要包含在页面中的所有小部件，例如说社交插件图标，导航花絮，用户图标，操作图标等等，那么您指定的方法包括自定义字体假设您只包含所需的字形，那么您的页面非常值得！

Answer 5

如果要使用FontAwesome：

将此信息添加到<head> </head>部分：

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

然后是这个CSS：

.select:after {
  content: "\f0da";
  float: right;
  border: none;
  font-family: 'FontAwesome';
}

插入符= "\f0d7"
插入符= "\f0d8"
脱字号= "\f0d9"
尖号= "\f0da"

如何用CSS显示带箭头的符号

5 个答案: