:placeholder-shown is for selecting the input itself when it’s placeholder text is being shown. placeholder text issue in IE browser, how can i solve that? For me, i’ve had to put “input” in front of all, otherwise it doesn’t work. I found this highly confusing as. Read more about this in an article by Chris Coyier, “One Invalid Pseudo Selector Equals an Entire Ignored Selector”. So, if you want to control the color with the color property alone, also remember to set opacity: 1. If we used a single colon :, this would be called a pseudo-class. It won’t work if you write it all together. Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. You might notice how in Firefox the color of the placeholder looks faded when compared to other browsers. I was guilty of this when I first got into web programming . Working on improving health and education, reducing inequality, and spurring economic growth? As opposed to ::placeholder which styles the placeholder text. Version 19+ support the pseudo element, rather than the class. Required fields are marked *. This functionality is not standardized. color: orange; How to Align the Placeholder Text of an Input Field in HTML. Because the pseudo-element, ::, was introduced in CSS3 and not the earlier CSS versions, some older browser such as Internet Explorer just never supported it. :placeholder-shown is standard, and even spec authors seem to think ::placeholder will be the standardized version. }. You may write comments in Markdown thanks to Jetpack Markdown. color: #191919; opacity: 1; font-weight: bold; font-family: arial; font-size: 14px; You get paid, we donate to tech non-profits. After 3 year you saved my life ahahah thx man. You would use a selector like input:focus::placeholder, which you wouldn’t be able to do with a pseudo class (they don’t stack the same way). also it’s important to use each declaration as a separated declaration, like in this article, and not like this: Sorry, I wanna know why is important to use each declaration separated and not all together? This renders a default placeholder on our text field. Method 2: Using the placeholder property. Use the ::placeholder pseudo-element to style your placeholder text in an or