# Dropdown Filter CSS

**URL:** <https://discuss.elastic.co/t/dropdown-filter-css/195744>\
**Category:** Kibana\
**Created:** [August 19, 2019, 12:48pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744 "2019-08-19T12:48:07Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![gbarnett](https://avatars.discourse-cdn.com/v4/letter/g/ac91a4/32.png) [@gbarnett](https://discuss.elastic.co/u/gbarnett)\
**Post date:** [August 19, 2019, 12:48pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/1 "2019-08-19T12:48:07Z")

</div>

Does anyone have an example of how to style the dropdown filter element?

---

<div class="post-metadata">

**Author:** ![alisongoryachev](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/alisongoryachev/32/111352_2.png) [@alisongoryachev](https://discuss.elastic.co/u/alisongoryachev)\
**Post date:** [August 19, 2019, 2:37pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/2 "2019-08-19T14:37:44Z")

</div>

Hi, @gbarnett ! Can you provide more information? I'm not sure what "dropdown filter element" you are referring to.

---

<div class="post-metadata">

**Author:** ![gbarnett](https://avatars.discourse-cdn.com/v4/letter/g/ac91a4/32.png) [@gbarnett](https://discuss.elastic.co/u/gbarnett)\
**Post date:** [August 19, 2019, 3:54pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/3 "2019-08-19T15:54:28Z")

</div>

In Kibana Canvas, there is the Dropdown Filter element that can be added to any canvas. I’m looking for how to style this element when used on a canvas by changing the CSS. I have done this for the Date/Time Filter element, but not for  
the Dropdown Filter element.

![image002.jpg](https://us1.discourse-cdn.com/elastic/original/3X/0/e/0e863cc54d88a5829ed818cf3d39d64aeada1b10.jpeg)

---

<div class="post-metadata">

**Author:** ![alisongoryachev](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/alisongoryachev/32/111352_2.png) [@alisongoryachev](https://discuss.elastic.co/u/alisongoryachev)\
**Post date:** [August 19, 2019, 4:22pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/4 "2019-08-19T16:22:14Z")

</div>

Hi @gbarnett.

You should be able to achieve this the same way as the Time Filter. Within the "Element style" panel, there is an option to define CSS.

 ![07%20PM](https://us1.discourse-cdn.com/elastic/original/3X/7/6/76ec8adb4c28cc7be0dad9380ebc638b616b768b.png)

---

<div class="post-metadata">

**Author:** ![gbarnett](https://avatars.discourse-cdn.com/v4/letter/g/ac91a4/32.png) [@gbarnett](https://discuss.elastic.co/u/gbarnett)\
**Post date:** [August 19, 2019, 4:39pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/5 "2019-08-19T16:39:27Z")

</div>

I tried that and it had no impact (at the CSS level). If there any any examples of changing the style of the dropdown filter with the CSS panel, that would be very helpdul.

![~WRD000.jpg](https://us1.discourse-cdn.com/elastic/original/3X/5/2/52d5f1c08649212fe6768d2cacdcf8df711810d9.jpeg)

![image002.jpg](https://us1.discourse-cdn.com/elastic/original/3X/0/e/0e863cc54d88a5829ed818cf3d39d64aeada1b10.jpeg)

---

<div class="post-metadata">

**Author:** ![alisongoryachev](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/alisongoryachev/32/111352_2.png) [@alisongoryachev](https://discuss.elastic.co/u/alisongoryachev)\
**Post date:** [August 19, 2019, 5:06pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/6 "2019-08-19T17:06:24Z")

</div>

Hi @gbarnett.

Can you provide more details on what you are trying to accomplish with the CSS changes, and then I can take a closer look? Thanks!

---

<div class="post-metadata">

**Author:** ![gbarnett](https://avatars.discourse-cdn.com/v4/letter/g/ac91a4/32.png) [@gbarnett](https://discuss.elastic.co/u/gbarnett)\
**Post date:** [August 19, 2019, 6:23pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/7 "2019-08-19T18:23:51Z")

</div>

Thanks Alison. I’m attempting to change the font size, font family, font size, font color and background color of the drop down button itself. I’ve been able to do this with the date/time filter drop down, but have not been able  
to do the same with the drop down filter element.

---

<div class="post-metadata">

**Author:** ![alisongoryachev](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/alisongoryachev/32/111352_2.png) [@alisongoryachev](https://discuss.elastic.co/u/alisongoryachev)\
**Post date:** [August 19, 2019, 7:23pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/8 "2019-08-19T19:23:42Z")

</div>

Are you targeting the the class name of the select element itself, `.canvasDropdownFilter__select`?

 ![25%20PM](https://us1.discourse-cdn.com/elastic/original/3X/7/5/75faa0a78f70f769a18711c2f4200164889250e0.png)

---

<div class="post-metadata">

**Author:** ![gbarnett](https://avatars.discourse-cdn.com/v4/letter/g/ac91a4/32.png) [@gbarnett](https://discuss.elastic.co/u/gbarnett)\
**Post date:** [August 20, 2019, 7:06am UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/9 "2019-08-20T07:06:41Z")

</div>

Alison, here is the CSS that I have for the Date/Time Filter element on my canvas, and it is working great. Now, I’m trying to style the Dropdown Filter element the same, but the same CSS does not work for the Dropdown Filter. I do not  
have an example of how to properly apply a CSS element to this filter to change the style of the main button. For the Date/Time Filter element, this is the configuration in the CSS box of the element’s properties…

.canvasRenderEl button{

font-family: sans-serif;

color: #000000;

font-size: 1.4em;

font-weight: bold;

background: #FBBD00;

border-radius: 12px;

padding: 10px;

}

.canvasRenderEl button:hover {

color: #ffffff;

background: #423300

}

![~WRD000.jpg](https://us1.discourse-cdn.com/elastic/original/3X/5/2/52d5f1c08649212fe6768d2cacdcf8df711810d9.jpeg)

![image002.jpg](https://us1.discourse-cdn.com/elastic/original/3X/0/e/0e863cc54d88a5829ed818cf3d39d64aeada1b10.jpeg)

---

<div class="post-metadata">

**Author:** ![alisongoryachev](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/alisongoryachev/32/111352_2.png) [@alisongoryachev](https://discuss.elastic.co/u/alisongoryachev)\
**Post date:** [August 20, 2019, 1:56pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/10 "2019-08-20T13:56:36Z")

</div>

Hi, @gbarnett. Can you try this?

```
.canvasDropdownFilter__select {
 font-family: sans-serif;
 color: #000000;
 font-size: 1.4em;
 font-weight: bold;
 background: #FBBD00;
 border-radius: 12px;
 padding: 10px;
}

.canvasDropdownFilter__select:hover {
  color: #ffffff;
  background: #423300;
}

```

Also, if you inspect both elements using the browser's dev tools, you'll notice they are two different element types. The Time Filter uses an HTML `<button>`, whereas the Dropdown Filter uses `<select>`, so they are not going to be exactly 1:1.

---

<div class="post-metadata">

**Author:** ![gbarnett](https://avatars.discourse-cdn.com/v4/letter/g/ac91a4/32.png) [@gbarnett](https://discuss.elastic.co/u/gbarnett)\
**Post date:** [August 21, 2019, 7:27am UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/11 "2019-08-21T07:27:35Z")

</div>

Fantastic! That was exactly what I was looking for. For future reference, what is the best way to find these types of references to know how to style elements on a Kibana Canvas? For example, how were you able to find that specific information regarding the labels for the CSS?

---

<div class="post-metadata">

**Author:** ![alisongoryachev](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/alisongoryachev/32/111352_2.png) [@alisongoryachev](https://discuss.elastic.co/u/alisongoryachev)\
**Post date:** [August 21, 2019, 12:31pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/12 "2019-08-21T12:31:13Z")

</div>

Great! Glad that worked. I'm not aware of any specific references to this. You should be able to find the class name of the element you wish to target using the browser's dev tools. For this example, I included a screenshot of this in one of my previous comments.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [September 18, 2019, 12:31pm UTC](https://discuss.elastic.co/t/dropdown-filter-css/195744/13 "2019-09-18T12:31:22Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.