编辑Jquery UI Accordion图标颜色

时间:2016-12-08 08:10:03

标签: jquery user-interface colors icons accordion

我只是想知道我是否可以编辑这种手风琴的默认图标的颜色,使其保持黑色,即使它是展开的。我只是在寻找一种不需要重建新手风琴或上传自定义图标的实用解决方案。

我的代码在这里:https://jsfiddle.net/d4riog7/5ucxwa00/

不确定是否可以在功能中实现:

 $( "#accordion" ).accordion({
      [...]
    });

甚至通过CSS

#accordion .ui-icon{
   [...]
}

欢呼声

2 个答案:

答案 0 :(得分:1)

Working Fiddle

使用背景图片。

.ui-icon
{
    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_black_256x240.png) !important;
}

您可以下载任何颜色的图标png文件。只需更改以下网址中的颜色部分:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

或者在本地下载并保存并使用locall URL。

答案 1 :(得分:0)

这不完美,但看看当你将这种风格规则添加到你的小提琴时会发生什么:

.ui-icon:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,255,255, 0.5);
  transition: all .3s linear;
}

不幸的是,图标是带有背景的span,因此没有太多空间来更改图像,但是之前的答案。我的解决方案为整个范围提供了色彩。