This is a migrated thread and some comments may be shown as answers.

Autocomplete CSS

1 Answer 224 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 2
Bob asked on 29 Feb 2016, 03:11 PM

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?

 

TIA,

Bob Mathis

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 02 Mar 2016, 08:40 AM
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.


.rsireqtext,
.rsireqtext.k-autocomplete
{
    border-color: red;
}
 
.rsireqtext,
.rsireqtext.k-input
{
    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).

http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#customization-of-appearance


Regards,
Dimo
Telerik
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
Tags
AutoComplete
Asked by
Bob
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Share this question
or