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

For various reasons I graphically Blurred type = text Input, not the entire element.

Is there any way to do this?

I currently have this:
HTML

  & lt; Label & gt; Text & lt; / Label & gt; & Lt; Span class = "verification limit" & gt; & Lt; Input class = "verification" type = "text" & gt; & Lt; / Input & gt; & Lt; / Span & gt; & Lt; Label & gt; Some text & lt; / Labels & gt; & Lt; Input & gt; & Lt; / Input & gt;  

and css

 . Validation: not (: Focus) {-webkit-filter: blur (3px); Filter: Blurred (3px); Border: 0; }. Validity Limit (range: 1px black solid; z-index: 20;}  

Previous style style definition to change the input range with the word verification

But this is far from right.

1. The boundary 'perimeter' is not the same dimension
2. If I increase the size of the outer boundary , I still get some blurred leak

Is there a better way to just text Thumb, and not a bounding box? Or some other methods of covering side effects to obscure the input element

< P> Instead of making the whole box effective, we simply make the font color transparent and add a text shadow effect.

Blur-on-to-Focus: No (Focus) { Color: transparent; text-shadow: 0 0 5 px rgba (0,0,0,0,5.5);}

It is detailed.

< / Html>