如何更改 Telerik ui 中 radcombobox 内复选框的样式？

问题描述

我正在使用 Telerik ui 组合框并启用其复选框属性。我也使用我的自定义皮肤。我的问题是我无法更改复选框的样式。我想根据我的要求更改复选框样式，尤其是复选框的背景颜色及其形状。 enter image description here

解决方法

首先，我建议您查看 w3schools，其中解释了如何在 How TO - Custom Checkbox 中设置复选框的样式。

现在，检查 Telerik ComboBox 以了解它是如何呈现的。如您所见，此 HTML 结构与 3wschools 教程中介绍的结构略有不同。

别担心，你可以调整它。使用您的 JavaScript/jQuery 技能和想象力来根据您的意愿改变结构。

将 OnClientLoad 事件附加到 ComboBox

<telerik:RadComboBox ID="RadComboBox1" runat="server" 
RenderMode="Lightweight" CheckBoxes="true" 
OnClientLoad="OnClientLoad">
    <Items>
        <telerik:RadComboBoxItem Text="Item 1" />
        <telerik:RadComboBoxItem Text="Item 2" />
        <telerik:RadComboBoxItem Text="Item 3" />
        <telerik:RadComboBoxItem Text="Item 4" />
    </Items>
</telerik:RadComboBox>

当此事件触发时，对 HTML 结构进行一些更改，类似于 w3schools 中的示例：

function OnClientLoad(sender,args) {
    // get reference to the ComboBox Items
    var $comboItems = $(sender.get_dropDownElement()).find('.rcbItem');

    // Loop through each item
    $comboItems.each(function () {
        var $item = $(this);
        // add the container class to the items
        $item.addClass('container');
        // render a span element inside the item
        $item.find('label').append('<span class="checkmark"></span>');
    })
}

您现在应该有一个类似的 CSS 可以使用的结构：

您现在可以重新使用 w3schools 教程中的 CSS，只需稍作更改，即通过使选择器更具体（更强）：

/* The container */
.RadComboBoxDropDown  .container {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.RadComboBoxDropDown .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over,add a grey background color */
.RadComboBoxDropDown .container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked,add a blue background */
.RadComboBoxDropDown .container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.RadComboBoxDropDown .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.RadComboBoxDropDown .container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.RadComboBoxDropDown .container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

有关 CSS 特异性的更多详细信息

具有自定义 CheckBox 设计的 Telerik ComboBox 的最终结果

我尽量保持我的回答简短。希望它会被证明有帮助;)