Set HTML5 Input’s Placeholder Style with CSS

HTMLPosted on

1 min read

With the HTML placeholder attribute, we can specify helper text for our input, textarea or select. This is a useful method for giving additional information to our user but don’t forget to use labels too.

The placeholder disappears by default so if the input is on focus the user doesn’t know any information (if no label is present).

<form action="">
  <input type="text" name="fname" placeholder="Your First Name">
</form>
input[type="text"]::-webkit-input-placeholder {
    color: red;
}

input[type="text"]:-moz-placeholder {
    color: #0db1ff;  /* Firefox 4-18 */
}

input[type="text"]::-moz-placeholder {
    color: #0db1ff;  /* Firefox 19+ */
}

input[type="text"]:-ms-input-placeholder {
    color: #0db1ff; /* IE10+ */
}

input[type="text"]::-ms-input-placeholder {
    color: #0db1ff; /* Edge */
}

input[type="text"]::placeholder { 
    color: #0db1ff; /* Modern browsers */
}
@mixin placeholder($color) {
    &::-webkit-input-placeholder {
        color: $color;
    }
    &:-moz-placeholder {
        color: $color;
    }
    &::-moz-placeholder {
        color: $color;
    }
    &:-ms-input-placeholder {
        color: $color;
    }
    &::-ms-input-placeholder {
        color: $color;
    }
    &::placeholder {
        color: $color;
    }
}

If you are working with Sass (or any preprocessor), you can make a custom mixin.

Note you must separate the selector because if you group it, an invalid one will cause ignore the whole group.

See the Pen Set HTML5 Input’s Placeholder Style with CSS by Adam Laki (@adamlaki) on CodePen.

Need a web developer? Maybe we can help, get in touch!

Looking for web dev job?
You can check them on Jooble.

To see and write comments, you must allow the related (Disqus) cookies. For more information, please visit our privacy policy page.

Similar Posts

More content in HTML category