CSS classes for Date Input don't work inside the ListView

[Ron]

Hi,

I am trying to apply a CSS class to some of the input fields inside the list view but noticed that if I specify the input type such as Date the CSS classes don't work inside the ListView. Below is an example. you can try the full example at jsbin.com/aSExaVu/1/edit

<form action="demo_form.asp">
 <ul data-role="listview" id="testListView">
  <li>
    Text: <input class="required">
  </li>
   <li>
    Date (class): <input type="date"  class="required">
  </li>
   <li>
    Date (style): <input type="date"  style="background:yellow">
  </li>
   <li>
    <input type="submit">
  </li>
 </ul>
</form>
</div>

<style scoped>
  .required
  {
    background:yellow
  }
</style>

In this example the "required" css class is applied on first 2 input elements. The Text input shows the yellow background but Date input doens't.
If I apply the yellow background style directly to Date input (3rd input) it works but ListView somehow blocks the CSS classes for Date input.
If I move the same Date input outside of the <UL> tag it also works.

Could you please let me know how can I apply CSS classes to input or select elements inside the ListView?

Regards
Ron Farko

[Dimo]

Hi Ron Farko,

The problem is caused by CSS specificty - there are built-in Kendo UI styles, which remove the background. You can either use "!important" inside the style declaration or use a stronger selector

.required,
.km-view .km-listview-wrapper .km-listview .required
{
  background: yellow;
}

Regards,
Dimo
Telerik