Blur only text inside input, not whole <input> element

Question

For various reasons I want to graphically blur (i.e. not focus/blur) the text inside an input of type=text, not the whole element.

Is there a way to do this?

I currently have this:

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

The last class style definition is to replace the border of the input with of class validation.

But this is far from perfect:

1. The border 'perimeter' is not the same dimension
2. If I increase the size of the outer border, I still get some blur leakage

Is there a better way of blurring the text only, and not the bounding box? Or some other way to cover up the side effects of blurring the input element

Answer 1

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

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

This is detailed here.

Answer 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:

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

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.

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.