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

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..."/>

框阴影

问题更棘手，因为当嵌套元素聚焦时，应设置其父框阴影。这可以通过两种方式实现：

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 方法，请考虑这一点。