單字卡遊戲．forms

04-19 ::placeholder

輸入框內顯示「提醒文字」:
<input type="text"> 使用 placeholder 屬性來設定要顯示給使用者看的文字
輸入框樣式限「字體、背景」有關的 CSS 屬性 :
僅小部份 CSS 屬性可使用，常用有 color、font-size、font-style，更多可參考 ::first-line 允許的屬性值

結構

...
<section>
  <fieldset>
    ...
    <h2><input class="input-txt" type="text" placeholder="請輸入英文 → Enter" ... onkeypress="…"></h2>  
    ...
  </fieldset>
</section>
...

樣式

…
.input-txt{
  line-height: 2;
}
input::placeholder {
  color: var(--black-50);
  background: var(--black-20);
  padding: 10px 0; /*解決輸入框的多餘白邊*/
}

程式碼

CSS forms：word card game - CodePen

語法

::placeholder - MDN
補充
- input框的placeholder使用line-height在Safari上不垂直居中的問題 - liu__software
- 網頁html基線對齊,深入理解CSS中的vertical-align屬性和基線問題 - 對方真在想你 - 轉載

瀏覽器相容