Placeholder css là gì

The:placeholder-shownpseudo-class selectsthe input đầu vào element itselfwhen placeholder text exists in a form input. Think of it as a nice way lớn distinguish between inputs that arecurrently showing placeholder textversus those that are not.

Bạn đang xem: Placeholder css là gì

input:placeholder-shown border: 5px solid red;

The idea behind placeholders

Text-baseds & theinput đầu vào can have sầu placeholder text. It’s text that is shown when the input đầu vào is empty, to lớn suggest a possible value. For example, a size asking for a school might have sầu a label for what it’s asking for, but then suggest “Forest Hills Example High School” in the placeholder as an example value:

School Name:

The difference between :placeholder-shown and ::placeholder

:placeholder-shownis for selecting the input itself when it’s placeholder text is being shown. As opposed to::placeholderwhich styles the placeholder text.

Here’s a diagram:

I found this highly confusing as:

the specs only have:placeholder-shown& not::placeholder:placeholder-showncan still affect the styling of the placeholder text, since it’s a parent element (e.g. font-size).

cảnh báo that:placeholder-shownis a pseudo-class(it’s an element in a particular state) and::placeholderis a pseudo-element(a visible thing that isn’t really in the DOM). Distinguishable by single-versus-double colons.

Xem thêm: Hướng Dẫn Cài Âm Thanh Cho Win 7, Download Cài Đặt Driver Âm Thanh Win 7

:placeholder-shown, being a pseudo-class, has to lớn select an existing element. It selects the đầu vào whenever you’re in the placeholder-showing state. The ::placeholder pseudo-element wraps the actual placeholder text.

If you need lớn style the placeholder text

Use ::placeholder (actually, use all the crazy vendor prefixes for it) which we have detailed in the Almanac here.

More Information

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

DesktopChromeFirefoxIEEdgeSafari

11*

sản phẩm điện thoại / TabletAndroid ChromeAndroid FirefoxAndroidiOS Safari

9.0-9.2