Customize the clear button in the kendo-colorpicker

Question

<kendo-colorpicker [value]="selected" [clearButton]="true"></kendo-colorpicker>

I want to remove the highlighted section and display Reset Text instead. How can we achieve this. I dont want to use ::ng-deep. Can we achieve this using :host ::ng-deep. In my application, I am using it in a component and I dont want to do this changes globally adding in the styles.scss or using ::ng-deep

Answer 1

We can use the below CSS, we also need to combine the fix provided in my previous answer Append kendo popup of the kendo-colorpicker to the 'component'

:host ::ng-deep .k-coloreditor-reset kendo-icon-wrapper{ 
    display: none !important; 
}

    :host ::ng-deep .k-coloreditor-reset {
        width: 75px;
        position: relative;
    }

    :host ::ng-deep .k-coloreditor-reset::before {
        content: 'Reset All';
        position: absolute;
        left: 10px;
        top:5px;
        height: 30px;
        width: 50px;
        z-index: 300000000;
        opacity: 1;
        background-color: transparent;
    }

Stackblitz Demo