# Dashboard CSS tips - Color picker (text input) with icon

**URL:** https://discourse.nodered.org/t/dashboard-css-tips-color-picker-text-input-with-icon/36730
**Category:** Dashboard
**Created:** [29 November 2020 20:11 UTC](https://discourse.nodered.org/t/dashboard-css-tips-color-picker-text-input-with-icon/36730 "2020-11-29T20:11:03Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [29 November 2020 20:11 UTC](https://discourse.nodered.org/t/dashboard-css-tips-color-picker-text-input-with-icon/36730/1 "2020-11-29T20:11:03Z")

</div>

To make it a bit more visually attractive.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b4ebe7450340562ca282aff30c9ca47de5e792f.png)

```auto
[{"id":"7481671e.330d38","type":"ui_template","z":"d7dd1239.8c663","group":"78c150e7.b098d","name":"dashboard style override","order":13,"width":0,"height":0,"format":"<style id=\"dashboard-styles-override\">\n\n/*style for input element container*/\n.nr-dashboard-theme .nr-dashboard-textinput md-input-container {\n padding:0 !important;\n margin:0 !important;\n /* border-radius:16px;*/ /* for rounded corners*/\n background-color:var(--nr-dashboard-widgetColor);\n}\n\n/*style for label (icon)*/\n.nr-dashboard-theme .nr-dashboard-textinput md-input-container label {\n position: relative;\n top: 11px;\n font-size: 12px;\n padding-left: 15px !important;\n}\n\n/*style for input element*/\n.nr-dashboard-theme .nr-dashboard-textinput input[type=\"color\"]{\n border: none !important;\n width: 48px;/*1x1 widget size horizontal*/\n height: 48px;/*1x1 widget size vertical*/\n margin: 0 !important;\n padding: 6% !important;/*adjust for picker size*/\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":210,"y":460,"wires":[[]]},{"id":"cad05e8e.8fee8","type":"ui_text_input","z":"d7dd1239.8c663","name":"color","label":"<i class=\"fa fa-paint-brush fa-2x\"></i>","tooltip":"","group":"78c150e7.b098d","order":7,"width":"2","height":1,"passthru":true,"mode":"color","delay":300,"topic":"","x":390,"y":460,"wires":[[]]},{"id":"78c150e7.b098d","type":"ui_group","z":"","name":"Default Group","tab":"65fa9b03.5ede34","order":1,"disp":true,"width":"6","collapse":false},{"id":"65fa9b03.5ede34","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [29 November 2020 20:14 UTC](https://discourse.nodered.org/t/dashboard-css-tips-color-picker-text-input-with-icon/36730/2 "2020-11-29T20:14:39Z")

</div>

It's great that you keep posting these snippets, they are really useful, and a good source for us to learn from 👍

---

<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: [29 December 2020 20:14 UTC](https://discourse.nodered.org/t/dashboard-css-tips-color-picker-text-input-with-icon/36730/3 "2020-12-29T20:14:51Z")

</div>

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