如何在 kendo UI 多选中为占位符提供 css答案

【问题标题】：how to give css for placeholder in kendoUI multiselect如何在 kendo UI 多选中为占位符提供 css
【发布时间】：2013-10-25 13:20:07
【问题描述】：

我正在使用剑道 UI。要在文本框中为占位符应用 css 我给了喜欢

::-webkit-input-placeholder { font-style:normal;        
             opacity:0.6;
            color:grey;
            font-size:14px;
        }

我正在尝试将 css 应用于多选中的占位符。谁能帮我怎么做？

【问题讨论】：

由于某种原因，剑道默认设置为黑色，而它应该是浅灰色。
它是黑色的，但他们调整了不透明度使其变为灰色。

标签： html css kendo-ui

【解决方案1】：

使用它来指定焦点之前输入的样式：

.k-multiselect-wrap>.k-input {
   font-style: normal;
   color: #C5C5C5;
   font-size: 16px;
   font-size: 1.6rem;
}

设置焦点时输入的样式（当用户键入时）：

.k-multiselect-wrap>.k-input:focus {
   color: #000; /* specify the focused input color */
}

【讨论】：

【解决方案2】：

怎么样：

.k-multiselect-wrap {
    font-style: normal;
    opacity: 0.6;
    color: grey;
    font-size: 14px;
}

或

.k-multiselect {
    font-style: normal;
    opacity: 0.6;
    color: grey;
    font-size: 14px;
}

取决于你到底想要什么

【讨论】：

如果我应用上面的 css，如果我在多选中选择任何元素，则应用相同的 css
你希望它看起来像已经选择的那些？
最初在多选中显示占位符，我想通过上面的 css 显示这个，它工作正常。如果我在多选中选择任何记录，那么上面的 css 将应用于所选记录及其也以 0.6 的不透明度和灰色显示
我不明白你想要什么。据我了解，最初选择的选项看起来不错，但是如果问题是选项在下拉菜单中的显示方式或新选择的选项的外观如何，或者是其中任何一个，我不明白？

【解决方案3】：

很抱歉一年后发表评论无论如何，我找到了使用 javascript 解决同样问题的方法：

1.订阅剑道多选的on change事件：

 @(Html.Kendo().MultiSelectFor(model => model.MyVar)                          
               .Events(events => events.Change("multiSelectChange"))
                )

那么你已经在 JavaScript 上声明了函数

function multiSelectChange() {
        var $multiSelectLists = $(".k-multiselect-wrap");
        $multiSelectLists.each(function (index) {
            if ($(this).find("ul").children().length > 0) {
                $(this).css({ "color": "gray", "opacity": "1.0" });
            }
            else {
                $(this).css({ "color": "gray", "opacity": "0.5" });
            }
        });
     }

我的代码中有各种多选，因此我在多选的每次更改时都对它们进行迭代。我知道我的代码效率不高，因为我迭代页面上的所有多选，并在每次更改其中一个时更改每个多选的 CSS。理想情况下，您不需要迭代所有现有的多选，但这很好用！

【讨论】：