JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<div id="searchWrap_lvl2"><input type="text" name="search_field" id="search_field" value="Поиск" onBlur="clearSearch_field_blur();" onClick="clearSearch_field_click()" ></div>
<script>
    function clearSearch_field_blur(){
        var search_fieldVal =  document.getElementById('search_field');    
        if (search_fieldVal.value ==""){        
       search_fieldVal.value = "Поиск";
        search_fieldVal.style.color= "grey";
        } 
    }
    function clearSearch_field_click(){
        var search_fieldVal =  document.getElementById('search_field');    
        if (search_fieldVal.value =="Поиск"){        
       search_fieldVal.value = "";
        search_fieldVal.style.color= "black";
        } 
    }
</script>

CSS

#searchWrap_lvl2 {
        
        border: 1px solid #ccc;
        display: inline;
        padding-left: 35px;
        padding-bottom: 7px;
        padding-top: 5px;
        padding-right: 2px;
        border-radius: 4px;
        background: url(../images/images.jpg) no-repeat;
}
#search_field {
        border: 0px;
        height: 25px;
        width: 350px;
        color: grey; 
        
}