Suresh Suthar Suresh Suthar - 2 months ago 5
CSS Question

Change placehloder font color in html

my current output is like below:
my current output is like below:

i want to change astric sign color (*) in placeholder,
i want to need output look like:
i want need output look like

How to possible this using jquey or css?
Thanks in advance..

Answer

Try this :

<!DOCTYPE html>
<html>
    <head>
        <style>
            .d {
                position: relative;
            }
            #txt {
                position: absolute;
                background-color: rgba(220, 220, 220, 0.3);
                border: 1px solid #000;
                
            }
            .lab {
                position: absolute;
                left: 10px;
            }
            .star {
                color: aquamarine;
            }
        </style>
    </head>
    <body>
       <div class="d"> 
            <input type="text" id="txt" >
            <div class="lab">
                <span class="name">Name</span>
                <span class="star">*</span>
            </div>
        </div>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
$(document).ready(function() {
    
    $("#txt").on("focusout input",function(){
        
        if($(this).val() == '') {
            
            $(".lab").css({display:"block"});
            $(this).css({backgroundColor:"rgba(220, 220, 220, 0.3)"})
        }
        
        else{
            
            $(this).css({backgroundColor:"#fff"});
            $(".lab").css({display:"none"});
            
        }
            
    })
        
})
        </script>
    </body>  
</html>

Comments