CODEWITHSUNDEEP
html
user10957435
user10957435

Reputation:

HTML5 Color picker embeded

So, in HTML5 there is this color picker:

<input type="color">

My problem is, this color opens a pop-up to select the color. Is there a way to embed the color selection in the page itself?

Upvotes: 1

Views: 576

Answers (2)

Grogu
Grogu

Reputation: 2485

Update 2021

If you are looking for something more extensive than the default HTML5 color picker, there is a library available called shoelace that renders inline color picker as mentionned by OP.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/shoelace.js/+esm"></script>


<h1>Input</h1>
<sl-color-picker size="small"></sl-color-picker>
<sl-color-picker size="medium"></sl-color-picker>
<sl-color-picker size="large"></sl-color-picker>

<hr>

<h1>Inline</h1>
<sl-color-picker inline></sl-color-picker>

Upvotes: 1

Heretic Monkey
Heretic Monkey

Reputation: 12112

The implementation of input type="color" is left to the browser. There is no standard as to how it should be rendered. There may be browser-specific methods to style them, but as far as I know there aren't any cross-browser CSS properties one can use.

This control has somewhat limited support (see caniuse.com for an updated list).

Upvotes: 4

Related Questions