Question

是样式错误还是如何使占位符在具有k文本框样式的输入和带有图标的文本框之间保持一致？

<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类添加到嵌套元素中来解决占位符颜色问题：

<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);
}

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

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

1 个答案: