I am playing around with default-v2 SASS for jquery and I noticed that placeholder or textbox focus/blur behave differently between standard input and input with icon.

<input class="k-textbox" placeholder="enter criteria" />

First example looks more "correct". Placeholder color is lighter. Box also gets a shadow on focus.

<span class="k-textbox k-space-right">
  <input placeholder="enter criteria" />
  <span class="k-icon k-i-search"></span>
</span>

Second example differes in a way it is flat. Placeholder is same color as text (confusing for user), box doesn't get any shadow on focus.

Is this a limitation or just a style misconfiguration? How can we make this to be consistent?

quick demo:

https://dojo.telerik.com/UmuwUYeJ

 

Hi Peter,

In general, the demonstrated approach for adding an icon to the textbox in the Demo is intended to be used with the Less-based Themes and will not work for the Sass-based Themes. However, you could resolve both the issues as follows:

The placeholder color issue could be resolved by adding the k-input class to the nested <input /> element:

The box-shadow issue is more tricky, as when the nested <input> element is focused, its parent box-shadow should be set. This can be achieved in two ways:

1) With JavaScript(Dojo example):

2) With CSS(Dojo example):

The above used focus-within select has limited browser support, thus take this into consideration in case you would like to use the CSS approach.

Regards,
Dimitar
Progress Telerik