Question

如何通过css规则更改kendo multiselect小部件的占位符？

.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多选小部件Reference Link中，我发现您可以使用data-placeholder

更改多选的占位符

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

Answer 2

您应该使用占位符来代替使用CSS。

您可以使用data-placeholder

上的select属性从HTML执行此操作

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

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

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

＆＃13;

$(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");


});

＆＃13;

<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>

＆＃13;

Answer 3

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

Stack Snippet

$(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 multiselect小部件的占位符

3 个答案: