# Input color picker

**URL:** <https://community.weweb.io/t/input-color-picker/3865>\
**Category:** How do I?\
**Created:** [August 13, 2023, 2:07pm UTC](https://community.weweb.io/t/input-color-picker/3865 "2023-08-13T14:07:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![AlainGioanni](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alaingioanni/32/3943_2.png) [@AlainGioanni](https://community.weweb.io/u/AlainGioanni)\
**Post date:** [August 13, 2023, 2:07pm UTC](https://community.weweb.io/t/input-color-picker/3865/1 "2023-08-13T14:07:22Z")

</div>

How can I ask for a color. There is no color picker ? What would be the right way to implement one ?

---

<div class="post-metadata">

**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\
**Post date:** [August 13, 2023, 6:26pm UTC](https://community.weweb.io/t/input-color-picker/3865/2 "2023-08-13T18:26:34Z")

</div>

I use coloris.js. I should create a walk thru of that. But that’s what I use.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [August 14, 2023, 12:39pm UTC](https://community.weweb.io/t/input-color-picker/3865/3 "2023-08-14T12:39:26Z")

</div>

Hi @AlainGioanni 👋

Just added it as a feature request so the product team can explore the idea.

In the meantime @jaredgibb, no pressure but I’d be super interested in seeing a walkthrough if you get a chance! 😄

Might record a video tutorial and/or add it to the user docs.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [August 24, 2023, 11:19am UTC](https://community.weweb.io/t/input-color-picker/3865/4 "2023-08-24T11:19:57Z")

</div>

Hi @AlainGioanni

We just added a basic color picker input element in the default UI kit:

 ![CleanShot 2023-08-24 at 13.17.59@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/a82bda69a80029ea6ec03ccbae63e3bc020636dd.png)

We’re exploring options to create a more advanced one in the future.

---

<div class="post-metadata">

**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\
**Post date:** [December 18, 2023, 5:29pm UTC](https://community.weweb.io/t/input-color-picker/3865/5 "2023-12-18T17:29:47Z")

</div>

Hey @Joyce

I am trying to set a pointer to be visible when hovering over the color picker. While this setting works in the editor mode, when previewing the app it breaks. Is this a known limitation?

[Workaround to the above issue]

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [December 19, 2023, 3:42pm UTC](https://community.weweb.io/t/input-color-picker/3865/6 "2023-12-19T15:42:12Z")

</div>

> [@jaredgibb](#):
>
> I am trying to set a pointer to be visible when hovering over the color picker. While this setting works in the editor mode, when previewing the app it breaks. Is this a known limitation?

Mmm I’m not sure. Let me ask the tech team and get back to you on that one

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [December 21, 2023, 9:24am UTC](https://community.weweb.io/t/input-color-picker/3865/7 "2023-12-21T09:24:48Z")

</div>

Hi,  
i digged up this, and this is apparently due to the fact that Chrome (and probably other browser) have a very specific stylesheet for input of type color. I will open a bug on our side to take this into account

---

<div class="post-metadata">

**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\
**Post date:** [December 23, 2023, 12:50am UTC](https://community.weweb.io/t/input-color-picker/3865/8 "2023-12-23T00:50:54Z")

</div>

It’s all good. For me, I thee the picker in a div and made it 0x0 pixels. I give the div the color of the picker as it’s background. I give the picker an id. I am dispatching a click to the color picker using js when I click on the holder div. It works perfect for my use case and I can achieve the exact look of the button that I want.
