/* Selects an <input> with a 'placeholder' attribute */
input[placeholder] {
color: #2ab7ca;
}
/* Selects the placeholder itself */
input::placeholder {
color: #ff6b6b;
}
/* Ignore these */
body {
margin: 0;
padding: 2em;
}
input {
display: block;
margin: 1em 0;
height: 2em;
width: 100%;
padding: 0.5em;
}
<input
type="text"
placeholder="This placeholder is red and not editable."
>
<input
type="text" placeholder=""
value="...whereas the input content itself is blue and editable."
>
input::placeholder選擇的佔位符，而input[attribute="value"]選擇>其屬性值為value。它們做不同的事情。視覺化範例：
/* Selects an <input> with a 'placeholder' attribute */ input[placeholder] { color: #2ab7ca; } /* Selects the placeholder itself */ input::placeholder { color: #ff6b6b; } /* Ignore these */ body { margin: 0; padding: 2em; } input { display: block; margin: 1em 0; height: 2em; width: 100%; padding: 0.5em; }注意：這個答案是從評論轉換而來的，因為我找不到任何重複的目標。