Настройте кнопку очистки в kendo-colorpicker

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

Я хочу удалить выделенный раздел и вместо него отобразить «Сбросить текст». Как мы можем этого добиться? Я не хочу использовать ::ng-deep. Можем ли мы добиться этого, используя :host ::ng-deep. В моем приложении я использую его в компоненте и не хочу вносить эти изменения глобально, добавляя style.scss или используя ::ng-deep.

🤔 А знаете ли вы, что...
CSS позволяет создавать сложные текстовые эффекты, такие как тени и обводки текста.


1
70
1

Ответ:

Решено

Мы можем использовать приведенный ниже CSS, нам также нужно объединить исправление, представленное в моем предыдущем ответе Добавить всплывающее окно kendo-colorpicker к «компоненту»

: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