Autocomplete CSS

2 posts, 0 answers
  1. Bob
    Bob avatar
    29 posts
    Member since:
    Dec 2014

    Posted 29 Feb 2016 Link to this post

    I have a Razor for that has several Autocomplete fields on it.


    Some of these fields are required, some are not required.


    I need to show the required fields in a red border and a blue background, while non-required fields are white, with a blue border.


    My css works for a regular text field, but i cannot figure out how to make it work for an autocomplete field.


    How would I do that?  I have tried " .HtmlAttributes(new { @class="rsireqtext",style = "width: 99%;" }) " in the autocomplete (rsireqtext is my 'required' styling),

    but that doesn't do it.


    Any ideas?



    Bob Mathis

  2. Dimo
    Dimo avatar
    8407 posts

    Posted 02 Mar 2016 Link to this post

    Hi Bob,

    The AutoComplete widget renders a <span> with an <input> inside. The <span> holds the border, while the background should be applied to the <input>. Please try adding the following CSS code after the Kendo UI stylesheets.

        border-color: red;
        background: yellow;

    Generally, it is possible to override the appearance of Kendo UI widgets by checking what HTML elements and CSS classes are being used, check the specificity of the CSS rules, and use custom CSS rules with equal or higher specificity (as demonstrated above).

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top