如何通过 css 更改 kendo 多选小部件的占位符

Question

如何根据 css 规则更改 kendo 多选小部件的占位符？

.k-multiselect-wrap > .k-input {
   color: #f02c0c; /* specify the default input color */
   content: "HOME";
}

此规则无效。更改颜色，但不更改内容。

Answer 1

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.

从 kendo multi-select 小部件 Reference Link，我发现您可以使用 data-placeholder 更改 multi-select 的占位符

<select id="required" multiple="multiple" data-placeholder="HOME">

Answer 2

您应该使用占位符而不是使用 CSS。

您可以从 HTML 开始使用 select

上的 data-placeholder 属性

<select id="optional" multiple="multiple" data-placeholder="Optional Users">

或者您可以在 JavaScript 中执行 MultiSelect 的初始化。

var optional = $("#optional").kendoMultiSelect({
    autoClose: false,
    placeholder:"Optional Users..."
}).data("kendoMultiSelect");

$(document).ready(function() {
  var required = $("#required").kendoMultiSelect({
    placeholder: "Required Users...",
    dataSource: [
      "Steven White",
      "Nancy King",
      "Nancy Davolio",
      "Robert Davolio",
      "Michael Leverling",
      "Andrew Callahan",
      "Michael Suyama",
      "Anne King",
      "Laura Peacock",
      "Robert Fuller",
      "Janet White",
      "Nancy Leverling",
      "Robert Buchanan",
      "Margaret Buchanan",
      "Andrew Fuller",
      "Anne Davolio",
      "Andrew Suyama",
      "Nige Buchanan",
      "Laura Fuller"
    ]
  }).data("kendoMultiSelect");

  var optional = $("#optional").kendoMultiSelect({
    placeholder: "Optional Users..."
  }).data("kendoMultiSelect");


});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

<div class="demo-section k-content">
  <h2>Invite Requried</h2>
  <select id="required" multiple="multiple">
  </select>
  <h2>Invite Attendees</h2>
  <label for="optional">Optional</label>
  <select id="optional" multiple="multiple">
      <option>Steven White</option>
      <option>Nancy King</option>
      <option>Nancy Davolio</option>
      <option>Robert Davolio</option>
      <option>Michael Leverling</option>
      <option>Andrew Callahan</option>
      <option>Michael Suyama</option>
      <option>Anne King</option>
      <option>Laura Peacock</option>
      <option>Robert Fuller</option>
      <option>Janet White</option>
      <option>Nancy Leverling</option>
      <option>Robert Buchanan</option>
      <option>Margaret Buchanan</option>
      <option>Andrew Fuller</option>
      <option>Anne Davolio</option>
      <option>Andrew Suyama</option>
      <option>Nige Buchanan</option>
      <option>Laura Fuller</option>
  </select>
</div>

Answer 3

如果您正在寻找 css 解决方案，您可以使用 :before 伪 class.

堆栈片段

$(document).ready(function() {
  $("#select").kendoMultiSelect();
});

//k-widget k-multiselect k-header k-multiselect-clearable

.select-parent .k-multiselect-wrap ul {
  position: relative;
}

.select-parent .k-multiselect-wrap ul:before {
  content: "Required users...";
  position: absolute;
  top: 7px;
  left: 11px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

<div class="k-content select-parent">
  <select id="select" multiple="multiple">
    <option>k-content 1</option>
    <option>k-content 2</option>
    <option>k-content 3</option>
    <option>k-content 4</option>
    <option>k-content 5</option>
  </select>
</div>

如何通过 css 更改 kendo 多选小部件的占位符

How to change placeholder of kendo multiselect widget by css

css

placeholder

multi-select

kendo-ui