how to change placeholder color using css

Placeholder is the attribute of the input element. Maximum browsers show the color of the placeholder text gray, so how to change color from the CSS. Placeholder is the pseudo element. You can change easily this required some webkit prefix for the browser support as you are seeing CSS below.
Also you can change color of the select option as given in the below example...

Code example

Placeholder color changing with CSS: 


<style>
    .anythinglearn .form-control::-webkit-input-placeholder {
        color: #00bb66;
    }
    .anythinglearn .form-control:-moz-placeholder {
        color: #00bb66;
    }
    .anythinglearn .form-control::-moz-placeholder {
        color: #00bb66;
    }
    .anythinglearn .form-control:-ms-input-placeholder {
        color: #00bb66;
    }
    .anythinglearn .form-control::-ms-input-placeholder {
        color: #00bb66;
    }
    .anythinglearn .form-control::placeholder {
        color: #00bb66;
    }


/* for the select option */

    .anythinglearn .form-control option{
        color: #00bb66;
    }
    .anythinglearn select.form-control{
        color: #00bb66;
    }
 
</style>


<div class="anythinglearn">
        <input class="form-control" placeholder="Placeholder text">
        <select class="form-control">
            <option value="1">Select option color change 1</option>
            <option value="2">change option color 2</option>
        </select>
    </div>
 


No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.