Placeholder Styling

By default, browsers apply an opacity setting to placeholder text to input fields that may cause the text to have insufficient contrast with the background color. The CSS of placeholder text can be modified, but it requires vendor specific CSS prefixes.

Code

<style>

    input::-webkit-input-placeholder {
        color: rgba(0,0,0,1);
        font-weight:bold;
    }

    input::-moz-placeholder {
        color: rgba(0,0,0,1); /* FF still applies an opacity setting of approximately 55% on top of this */
        font-weight:bold;
    }

    input:-moz-placeholder { /* Older versions of Firefox */
        color: black;
        font-weight:bold;
    }

    input:-ms-input-placeholder {
        color: rgba(0,0,0,1);
        font-weight:bold;
}

</style>

<label for="fn">First name</label><input id="fn" placeholder="First Name" type="text" />

Implementation

Testing Notes

This has been tested and works in the following: