SASS 主题 - 占位符样式不一致

Question

这是样式错误还是如何使占位符在带有 k-textbox 样式的输入和带有 icon 的文本框之间保持一致：

<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

Answer 1

可以通过将 k-input class 添加到嵌套元素来解决占位符颜色问题：

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

box-shadow 的问题比较棘手，因为当嵌套元素获得焦点时，它的父 box-shadow 应该被设置。这可以通过两种方式实现：

与JavaScript(Dojo example):

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

与CSS(Dojo example):

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

上面使用的 select 内的焦点有 limited browser support，因此如果您想使用 CSS 方法，请考虑到这一点。

SASS 主题 - 占位符样式不一致

SASS theme - placeholder style inconsistency

user-interface

styles

sass

placeholder

kendo-ui