Logo - Albert Walicki

Style your placeholders

CSS
Styling input placeholder with different css pseudo elements

You can easily style your input placeholders with CSS pseudo-elements.
To support all browsers, you need to add prefixes:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  background: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  background: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  background: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  background: #fff;
}


Remember to add them separately! If you add them in this way:

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder {
  background: #fff;
}

Your code won't work! You can read about it here on StackOverflow.

See more tips!

CSS
::selection pseudo class selector allows to style selection of the text

Style your selected text

Logo - Albert Walicki

Hello, i’m Albert Walicki. i’m a frontend developer and cofounder of development & design agency Hype4 and education platform Hype4 Academy. I wrote a book for Junior Frontend developers called Frontend Unicorn.

BlogGlassmorphismAurora UIShapes in CSSUnique css illustrations

Get in touch!

Have a question or need a project? Contact me!

© 2020-present Albert Walicki. All Rights Reserved