如何更改选择标签上的向下箭头

新手上路,请多包涵

如何更改选择标签上的向下箭头?例子:

现在的样子:

在此处输入图像描述

我希望它如何:

在此处输入图像描述

我怎样才能做到这一点?

原文由 user7090116 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 296
2 个回答

您可以使用纯 css 尝试此操作,首先您需要删除 select 标记的默认行为 appearance:none 属性。

指定浏览器

  • 外观:无;

  • -webkit-外观:无; /* chrome and safari */

  • -moz外观:无; /* Mozilla */

  • -ms-外观:无; /* Internet explorer */

然后你可以设置 background-image

 select {
	width:100px;
	float:left;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	border:2px solid #000;
	background:url('http://www.free-icons-download.net/images/small-down-arrow-icon-15593.png');
	background-repeat:no-repeat;
	background-size:16px 17px;
	background-position:right 0px;
}
 <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

原文由 Jishnu V S 发布,翻译遵循 CC BY-SA 3.0 许可协议

这是另一种使用 SVG 的简单方法,没有外部图像:

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 24px;
  background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 100% 50% no-repeat #fff; } /* change or remove #fff color if not needed */

原文由 Kerem 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题