# Styling Dat.GUI (Layer Example)

**URL:** <https://discourse.threejs.org/t/styling-dat-gui-layer-example/4717>\
**Category:** Questions\
**Tags:** css\
**Created:** [October 28, 2018, 9:51pm UTC](https://discourse.threejs.org/t/styling-dat-gui-layer-example/4717 "2018-10-28T21:51:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex\_Pryor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alex_pryor/32/5795_2.png) [@Alex\_Pryor](https://discourse.threejs.org/u/Alex_Pryor)\
**Post date:** [October 28, 2018, 9:51pm UTC](https://discourse.threejs.org/t/styling-dat-gui-layer-example/4717/1 "2018-10-28T21:51:09Z")

</div>

Hey all,

I am trying to research how to style a Dat.GUI toggle menu, particularly the one in the layers menu:  
[https://threejs.org/examples/webgl\_layers.html](https://threejs.org/examples/webgl_layers.html)

I can’t find much documentation about Dat.GUI styling. I want to use PNG images in place of the toggle buttons, checkbox toggles and drop down tab. is there a known method to do this?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 29, 2018, 7:41am UTC](https://discourse.threejs.org/t/styling-dat-gui-layer-example/4717/2 "2018-10-29T07:41:22Z")

</div>

Hi!  
dat.GUI is a separated control library and, IMHO, it’s out of the scope of this forum, but…  
As any control, it contains many html-elements that you can style with css.

Using element inspector, you can see what style applied to what element:  
 ![GUI_checkbox_css](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/f/fb5566bdf03ceb5d0101dd699e209d4722e528d5.png)

Originally, style for checkboxes is:

```auto
.dg .c input[type="checkbox"] {
    margin-top: 9px;
}

```

I’ve simply added some lines right in the inspector and got those red corners on checkboxes.

Maybe this reply will give you some ideas with styling of that control.

---

<div class="post-metadata">

**Author:** ![Alex\_Pryor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alex_pryor/32/5795_2.png) [@Alex\_Pryor](https://discourse.threejs.org/u/Alex_Pryor)\
**Post date:** [October 29, 2018, 3:14pm UTC](https://discourse.threejs.org/t/styling-dat-gui-layer-example/4717/3 "2018-10-29T15:14:08Z")

</div>

Thank you for the info.

I apologize for posting out of scope. Delete if needed.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 29, 2018, 4:52pm UTC](https://discourse.threejs.org/t/styling-dat-gui-layer-example/4717/4 "2018-10-29T16:52:10Z")

</div>

No need to delete it 🙂

---

<div class="post-metadata">

**Author:** ![Alex\_Pryor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alex_pryor/32/5795_2.png) [@Alex\_Pryor](https://discourse.threejs.org/u/Alex_Pryor)\
**Post date:** [October 29, 2018, 10:31pm UTC](https://discourse.threejs.org/t/styling-dat-gui-layer-example/4717/5 "2018-10-29T22:31:20Z")

</div>

Hey Prisoner,

I know this is out of scope, but I have been working on this all day. I can do most of the styling, but there are some elements which will not style. It will work in the browser, but when I add the CSS to my index file the change does not take effect. Do you know why this might be?

For example:  
.dg.main .close-button {  
background-color: #0000;  
}

It works in the Chrome inspector, but when I add it to my index and run it, nothing changes.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 30, 2018, 6:48am UTC](https://discourse.threejs.org/t/styling-dat-gui-layer-example/4717/6 "2018-10-30T06:48:03Z")

</div>

Would be cool to provide a live code example 🙂

All three options work as expected:

```javascript
  .dg.main .close-button {
    /*background-color: magenta;*/
    /*background-color: #f0f;*/
    background-color: rgb(255, 0, 255);
  }

```

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/prisoner849/4s706tu9/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

> [@Alex\_Pryor](#):
>
> background-color: #0000;

Shouldn’t it be `#000` (three zeros instead of four)?