JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:relative; margin:0; padding:0;">
<span id="asteriscos" style="display:block; position:absolute; width:3px; left:0; z-index:-1">*</span>
<input type="text" name="x" id="txt"  value="porno zatanico!" style="color:#FFF; margin-right:5px; z-index:80; outline:0; background:none; float:left    ; font-size:1px; height:12px; display:block; padding-top:15px; letter-spacing:7px; width:200px;" /><span style=" font-family:Verdana, Geneva, sans-serif; margin-top:4px;font-size:10px;;float:left;"></span>
</div>

JavaScript

$(function(){
    $.each($("#txt").val().split(""), function(index,value){
        if(index){$("#asteriscos").append("*")}
    })
        
        $("#asteriscos").click(function(){
           $("#txt").click() 
        })
    
    $("#txt").click(function(){
        this.focus()
        this.select()
        $(this).css("background","#3297fd").css("color","#3297fd")
        $("#asteriscos").css("color","#FFF").css("z-index","90")
        $(this).next().html(" TEXTO SELECCIONADO")
    }).blur(function(){
        $(this).css("background","none").css("color","#FFF")
        $("#asteriscos").css("color","#000").css("z-index","-1")
        $(this).next().html("")
    })    
    
})