更改边框颜色时,KendoUI下拉列表会丢失数据

$(document).ready(function() {

  $('#btn').on('click', function() {
    var dd = $('#myColor').kendoDropDownList().data("kendoDropDownList");
    dd.wrapper.find(".k-input").css("border", "2px solid red");

  });

  var data = [{
      text: "Select ",
      value: "0"
    },
    {
      text: "Black",
      value: "1"
    },
    {
      text: "Orange",
      value: "2"
    },
    {
      text: "Grey",
      value: "3"
    }
  ];

  // create DropDownList from input HTML element
  $("#myColor").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="form-group">
  <label for="myColor" class="control-label col-lg-2 col-sm-4">Color</label>
  <div class="col-lg-10 col-sm-8">
    <input id="myColor" class="form-control" placeholder="Color" name="myColor" style="max-width:75%;" />
  </div>
</div>

<div class="form-group">
  <button id='btn' class='btn btn-success'> Click </button>
</div>