Bricks builder原生filter筛选功能的重置按钮如何在未激活时候半透明显示

Brick builder的filter也就是筛选功能已经非常强大了，能满足我目前遇到的所有的筛选需求。

最近在做的一个网站有很多不同类型的筛选功能，这时候我就想加入一个Reset重置的功能。想加入只需要面板搜索filter，然后如下面找到filter submit / rest组件。

同时做好相关的设置，Target query选择你设置的query loop，动作action选择Reset，然后把按钮的文字改成Reset，Clear，重置或者任何人一看就懂的，这时候重制功能已经起作用了。

但是有个体验不太好的点就是，比如我选择按钮的颜色为网站主色调，不管是重制功能激活还是没激活的时候按钮的颜色都是不一样的。实际上用户体验好的状态应该是，功能未激活时候要有其他的状态显示，比如不同的颜色，或者整个按钮灰下去。

看到上面有一个Hide if no active filter的功能，也就是如果没激活状态下按钮直接隐藏，这也也行其实，但是我还是想要实现上面所说的功能。注意到下面有一段话.brx-no-active-filter added to this button if there is no active filter. 同时查询官方文档关于这个filter功能的介绍。

Hide if No Active Filter: Enable this option to hide the button when there are no active filters on the target query. Bricks will add the .brx-no-active-filter class to this button, allowing you to apply custom CSS for alternative styling. (Reset action only). (@since 1.11)。

也就是bricks已经考虑到这个需求了。右键查询网页元素得知，没有激活时候.brx-no-active-filter设置了display: none。那么我知道把他在未激活时候还是显示出来，然后设置一个低透明度就实现了，代码如下，注意root后面不要有空格：

/* 重置按钮未激活时候透明度50% */
%root%.brx-no-active-filter {
  display: block;
  opacity: .5;
}

/* 重置按钮未激活时候透明度50% */
%root%.brx-no-active-filter {
  display: block;
  opacity: .5;
}

在bricks后台自定义css面板如下：

最终的效果如下，特此记录。

如果你对bricks builder感兴趣，可以看看我的bricks builder教程。