Customization

Styling

You can change the look and feel of Colorpicker.

Related sample: Colorpicker. Styling (custom CSS)

Follow these steps:

• Add new CSS classes with the styles you need to the <style> section of your HTML page or to your stylesheet (remember to link the stylesheet on the page):

<style>
    .my-first-class {
        /*some styles*/
    }
    
    .my-second-class {
        /*some styles*/
    }
</style>

• Specify the class name (or several names separated by spaces) as the value of the css property:

const colorpicker = new dhx.Colorpicker("colorpicker_container", {
    css:"my-first-class my-second-class"
});

For instance:

<style>
    .custom-class {
        background: #f2f2f2;
        border: solid 1px lightblue;
    }

    .custom-class .dhx_palette__cell {
        border-radius: 50%;
    }

    .custom-class .dhx_palette__cell:after {
        border-radius: 50%;
    }

    .custom-class .dhx_colorpicker-custom-colors__picker {
        border-radius: 50%;
    }
</style>

<script>
    const colorpicker = new dhx.Colorpicker("colorpicker_container", {
        css: "custom-class dhx_widget--bordered",
    });
</script>