Css 自定义kendo色彩 Select 器中的清晰按钮

发布于04月09日

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

我想删除突出显示的部分并显示Reset文本.我们如何才能实现这一目标.我不想用途::ng-deep.我们可以使用:Host::ng-deep来实现这一点吗？在我的应用程序中，我正在一个组件中使用它，我不想通过添加styles.scss或使用::ng-deep来全局执行此更改

推荐答案

我们可以使用下面的CSS，我们还需要结合我之前的答案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