Question

我正在使用kendo UI。要在文本框中为占位符应用css，我给了

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

我正在尝试在多选中尝试将css应用于占位符。任何人都可以帮我怎么做？

Answer 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 */
}

Answer 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;
}

取决于您的确切需要

Answer 3

很抱歉在一年后发表评论无论如何，我发现使用javascript的解决方案同样的问题：

1.订阅关于kendo multi select的更改事件：

 @(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。理想情况下，您不需要迭代所有现有的多选，但这样可以正常工作！

如何在kendoUI multiselect中为占位符提供css

3 个答案: