仅模糊输入内的文本，而不是整个<input />元素

Question

出于各种原因，我想以图形方式模糊（即不聚焦/模糊）type=text输入内的文本，而不是整个元素。

有办法做到这一点吗？

我目前有这个：

.validation:not(:focus) {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    border:0;
}
    
.validation-border{
    border: 1px black solid;
    z-index:20;
}

<p>
    <label>Text</label>
    <span class="validation-border">
        <input class="validation" type="text" value="blurred text"/>
    </span>

    <label>Some text</label>
    <input/>
</p>

最后一个类样式定义是用类validation替换输入的边框。

但这远非完美：

1. 边界'周长'不是同一维度
2. 如果我增加外边框的大小，我仍然会出现一些模糊泄漏



是否有更好的方法来模糊文本，而不是边界框？或者其他一些方法来掩盖模糊输入元素的副作用

Answer 1

我们不是影响整个框，而是将字体颜色更改为透明并添加文本阴影效果。

.blur-on-lose-focus:not(:focus) {
     color: transparent;
     text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

<div>
    <input type="text" class="blur-on-lose-focus" value="blurred text"/>
</div>

详细here。

Answer 2

不幸的是，你不能模糊元素的内部（在写作时），也不会模糊其边界框，边框等。另一种方法是：

<div class="input-like">
  <input>
</div>

将.input-like容器的样式设置为输入（边框等）。然后从包含的input元素中删除边框和其他样式。此时，您可以将模糊滤镜应用于输入，并保持包含元素不变。

模糊泄漏似乎来自输入上的输入尝试设置background-color: transparent;和包含元素上的background-color: white;的白色背景。

Live example.

Answer 3

完全删除input's边框（不仅仅是当它没有聚焦时）

.validation {
    border:0px;
}

此外，您可以删除焦点大纲（尽管出于辅助功能的原因不建议这样做）：

.validation:focus {
    outline:none;
}

.validation{
  border:0px;
}
.validation:not(:focus) {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}
.validation:focus {
  outline:none;
}
.validation-border{
  border: 1px black solid;
}

<label>Text</label>
<span class="validation-border"><input class="validation" type="text"></input></span>
<label>Some text</label><input />