首頁 > web前端 > css教學 > 我可以使用 CSS 設定文字輸入樣式來模擬密碼欄位嗎?

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

Mary-Kate Olsen
發布: 2024-10-26 22:17:29
原創
820 人瀏覽過

Can I Style a Text Input to Mimic a Password Field Using 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板