如何在 telerik ui 中更改 radcombobox 中复选框的样式？

Question

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

Answer 1

首先，我建议您在 How TO - Custom Checkbox.

查看解释如何设置复选框样式的 w3schools

现在，检查 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特异性的更多详细信息

带有自定义复选框设计的 Telerik ComboBox 的最终结果

我尽量让我的回答尽可能简短。希望它会有所帮助 ;)

如何在 telerik ui 中更改 radcombobox 中复选框的样式？

How to change the style of checkbox inside radcombobox in telerik ui?

c#

asp.net

telerik

radcombobox

telerik-grid