# Node-Red Dashboard Colour Picker CSS

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-colour-picker-css/86761>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [26 March 2024 10:30 UTC](https://discourse.nodered.org/t/node-red-dashboard-colour-picker-css/86761 "2024-03-26T10:30:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnsteeleMolinare](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/johnsteelemolinare/32/51236_2.png) [@johnsteeleMolinare](https://discourse.nodered.org/u/johnsteeleMolinare)\
**Post date:** [26 March 2024 10:30 UTC](https://discourse.nodered.org/t/node-red-dashboard-colour-picker-css/86761/1 "2024-03-26T10:30:12Z")

</div>

I am trying to get rid of the black circle around the Colour-Picker, setting all the elements to transparent seems to cause issues so I have just set them to the same value as the background colour using the followng CSS;

```
/* Color picker text BG */
.nr-dashboard-theme .color-picker-input-wrapper > input {
    color: white !important;
    background-color: #7F7173 !important;
    border: none !important;
    opacity: 0;
}
.nr-dashboard-theme .color-picker {
    color: white !important;
    background-color: #7F7173 !important;
    border: none !important;
    opacity: 0;
}
.nr-dashboard-theme .color-picker-overlay {
    color: white !important;
    background-color: #7F7173 !important;
    border: none !important;
    opacity: 1;
}
.nr-dashboard-theme .color-picker-wrapper {
    color: white !important;
    background-color: #7F7173 !important;
    border: none !important;
    opacity: 1;
}
.nr-dashboard-theme .color-picker-row {
    color: white !important;
    background-color: #7F7173 !important;
    border: none !important;
    opacity: 1;
}
.nr-dashboard-theme .color-picker-grid {
    color: white !important;
    background-color: #7F7173 !important;
    border: none !important;
    opacity: 1;
}
.nr-dashboard-theme .color-picker-grid-inner {
    color: white !important;
    background-color: #7F7173 !important;
    border: none !important;
    opacity: 0;
}
.nr-dashboard-theme .color-picker-panel {
    color: white !important;
    background-color: transparent !important;
    border: none !important;
    opacity: 1;
}
.nr-dashboard-theme .color-picker-grid-wrapper {
    color: white !important;
    background-color: #7F7173 !important;
    border: none !important;
    opacity: 1;
}

```

Whatever I do I can't seem to get rid of the faint border around the edge;

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3e585799a3c74866662078be7a35ba8e08ffc0a4.png)

I know it's very minor but if anyone knows how to remove it that would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 April 2024 10:30 UTC](https://discourse.nodered.org/t/node-red-dashboard-colour-picker-css/86761/2 "2024-04-25T10:30:37Z")

</div>

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