仅模糊输入内的文本，而不是整个元素-Bluronlytextinsideinput,notwholeelement

6  

Rather than effecting the whole box, just we change the font color to transparent and add a text shadow effect.

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

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

This is detailed here.

这里详细说明。

2  

Unfortunately, you cannot blur the interior of an element (at the time of writing) without also blurring its bounding box, border, etc. An alternative approach would be:

不幸的是,你不能模糊元素的内部(在写作时),也不会模糊其边界框,边框等。另一种方法是:

Where you style the .input-like container to look like an input (border, etc.). Then remove the border and other styles from the contained input element. At that point you can apply the blur filter to the input and leave the containing element unchanged.

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

The blur leakage seems to be coming from the white background of the input—try setting background-color: transparent; on the input and background-color: white; on the containing element.

模糊泄漏似乎来自输入尝试设置背景颜色的白色背景:透明;关于输入和背景颜色:白色;在包含元素上。

Live example.

1  

Remove the input's border entirely (not just when its not focussed)

完全删除输入的边框(不仅仅是当它没有聚焦时)

.validation {
    border:0px;
}

Also, you could remove the focus outline (although this is not recommended for accessibility reasons):

此外,您可以删除焦点轮廓(尽管出于可访问性原因,不建议这样做):

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

Text

Some text