Тема SASS - несоответствие стиля заполнителя - PullRequest
Новая
       12

Тема SASS - несоответствие стиля заполнителя

0 голосов
/ 25 января 2019

Это ошибка стиля или как сделать так, чтобы заполнитель был согласованным между вводом со стилем k-textbox и надписью со значком: 

<input class="k-textbox" placeholder="lighter color and shadow on focus" />

<span class="k-textbox k-space-right">
  <input placeholder="same color and no shadow on focus" />
  <span class="k-icon k-i-search"></span>
</span>

Демо-версия: https://dojo.telerik.com/UmuwUYeJ

1 Ответ

0 голосов
/ 29 января 2019

Проблема цвета заполнителя может быть решена путем добавления класса k-input к вложенному элементу: 

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

Проблема с box-shadow более сложна, так как, когда вложенный элемент фокусируется, его родительbox-shadow должен быть установлен.Это может быть достигнуто двумя способами:

  1. С помощью JavaScript ( Пример Dojo ): 

    $(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");
    });
});

  2. С помощью CSS( Пример Dojo ): 

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

Приведенный выше выбор фокусировки внутри имеет ограниченную поддержку браузера , поэтому примите это во внимание вна тот случай, если вы хотите использовать CSS-подход.

...