首頁 > web前端 > css教學 > 主體

如何僅使用 CSS 建立帶有星號的類似密碼的輸入?

DDD
發布: 2024-10-26 21:32:03
原創
119 人瀏覽過

How to Create a Password-Like Input with Asterisks Using Only CSS?

樣式輸入類型=文字類型=密碼

問題:

問題:

你怎麼可以修改type=text 的輸入元素以僅使用CSS 顯示星號(如密碼輸入)?

解決方案:
<code class="css">input.pw {
  -webkit-text-security: disc; /* Older Safari/Chrome */
  text-security: disc; /* W3C */
}</code>
登入後複製

儘管此問題僅具有演示性質,CSS對於現代瀏覽器來說,單獨使用就可以達到這種效果:
<code class="html"><input type="text" class="pw" value="abcd">

<!-- Button to toggle asterisk display -->
<button onclick="this.previousElementSibling.classList.toggle('pw')">Toggle '•'</button></code>
登入後複製
將此CSS 應用於類別為「pw」的輸入元素:

以上是如何僅使用 CSS 建立帶有星號的類似密碼的輸入?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!