SASS theme textbox placeholder inconsistencies

[Peter]

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

 

[Dimitar]

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:

<input type="text" class="k-input" placeholder="placeholder..."/>

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):

<script>
  $(document).ready(function() {
    $(".k-textbox input").focus(function() {
    $(this).parent().css("box-shadow", "0 2px 2px 1px rgba(0,0,0,.06)");
  });

  $(".k-textbox input").focusout(function() {
    $(this).parent().css("box-shadow", "none");
  });
});
</script>

2) With CSS(Dojo example):

<style>
  .k-textbox:focus-within {
    box-shadow: 0 2px 2px 1px rgba(0,0,0,.06);
  }
</style>

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