Geek Answers Handbook

Twitter bootstratp source, :: before -webkit-input-placeholder - is this a typo?

Twitter bootstrap.css has this code:

:-moz-placeholder { color: #999999; } :-ms-input-placeholder { color: #999999; } ::-webkit-input-placeholder { color: #999999; }

Question about :: before -webkit-input-placeholder . Why two :: and what is it?

+4
source share
2 answers

:: denotes a pseudo-element (e.g. ::before and ::after ). : denotes a pseudo-class (for example :link and :hover ). This is just a naming convention to distinguish between pseudo-elements and pseudo-classes. IE8 and lower DO NOT support convention :: .

Here's an explanation of the two directly from the W3C specification: http://www.w3.org/TR/CSS21/selector.html#pseudo-elements

+4
source

: designed for pseudo-class. This is a modification of an existing item. :hover , for example, represents the same element, but with the mouse pointer over it. :focus - this is when the cursor is in the form element.

:: is for pseudo-elements that are not directly part of the element you are putting. Instead, they are elements that do not exist in the DOM, but can be styled anyway. ::after is a good example of this, since you can create a style that doesn't really exist with it.

However, it usually looks like browsers have some gray area of ​​misinterpretation. IE and Firefox seem to think that placeholder is a pseudo-class, where webkit treats it as a pseudo-element.

It also changes the way it is created, although this is not just syntax. Check it out in Chrome and Firefox: http://jsfiddle.net/UxAY6/

When this fiddle is viewed in webkit, the red frame is inside the text box. It stylizes the placeholder pseudo-element inside the text box. But this Firefox is a pseudo-class of the input element, so the border is applied to the text field while it shows the placeholder.

+2
source

More articles:


All Articles