Question

我想改变＆＃34; kendo-switch＆＃34;的高度，宽度和颜色。我试图改变元素的风格但是没有用。

最好的方法是什么？

Answer 1

更改高度和宽度覆盖.k-switch类并更改字体大小：

.k-switch {
    font-size: 5px !important;
}

更改开关覆盖.k-switch-on和.k-switch-off类的背景颜色

.k-switch-on  {
    background-color: green !important;
}
.k-switch-off  {
    background-color: red !important;
}

删除文字：

<kendo-switch [onLabel]="' '" [offLabel]="' '"></kendo-switch>

更改圆圈颜色：

.k-switch-handle{
    background-color: black !important;
}

Answer 2

要更改高度，请使用：

.k-switch {
  font-size: 7px;
}

对于宽度，您可以使用：

.k-switch {
  width: 100px;
}

对于“打开”颜色，您可以使用：

.k-switch-on .k-switch-handle {
  background-color: mediumseagreen !important;
}

.k-switch-on .k-switch-container {
  background-color: palegreen !important;
}

对于“关”颜色：

.k-switch-off .k-switch-handle {
  background-color: red !important;
  background-image: none !important; /*Not sure if this is always required*/
}

.k-switch-off .k-switch-container {
  background-color: tomato !important;
}

此外，要添加突出的悬停效果，请添加以下内容：

.k-switch *:hover {
  filter: brightness(110%);
}

＆＃34;剑术开关＆＃34;改变高度，宽度和颜色

2 个答案: