我可以使用 CSS 設定文字輸入樣式來模擬密碼欄位嗎？

設定文字輸入樣式以類似密碼欄位

問題：

是否可以使用type= 製作輸入元素「 text」看起來與使用純CSS 的type="password"（即隱藏實際輸入）相同？

答案：

是的，你可以實現使用實驗性CSS 選擇器-webkit-text-security:

<code class="css">input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}</code>

在此CSS 規則中，-webkit-text-security 和text-security 具有類別pw 的目標輸入元素，指定輸入應顯示圓盤字元(•) 以遮擋使用者的輸入。

為了進行演示，請考慮以下HTML 代碼：

<code class="html"><input type="text" class="pw" value="abcd">

<button onclick="this.previousElementSibling
.classList.toggle('pw')">Toggle '•'</button></code>

與此元素交互時，您會注意到一個切換按鈕在將輸入顯示為純文本和用光盤字符模糊輸入之間切換。

以上是我可以使用 CSS 設定文字輸入樣式來模擬密碼欄位嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！