CSS實現密碼框前圖標的方法

input[type="password"] {
padding-left: 30px;
background-repeat: no-repeat;
background-position: 5px center;
background-size: 16px 16px;
background-image: url('lock.png');
}

在Web開發中，密碼框是一個很常見的UI組件。為了增加用戶體驗和視覺效果，密碼框前添加一個小圖標是一種非常普遍的做法。那么如何使用CSS實現這個效果呢？

首先，我們需要指定密碼框的類型為password，這樣瀏覽器在渲染時才會自動將密碼文本轉換為圓點。

然后，我們可以使用padding-left屬性調整輸入框的左側內邊距，使得輸入框內文字不會與圖標重合。接著，我們使用background-image屬性指定圖標的地址，并設置background-repeat為no-repeat，避免圖標重復出現。通過background-position屬性，我們可以控制圖標在輸入框內的位置。最后，通過background-size屬性調整圖標大小，保證在各種不同分辨率的屏幕上都有好的顯示效果。

通過以上CSS代碼，我們可以快速方便地為密碼框添加一個漂亮的圖標，從而讓用戶更加直觀地看到密碼輸入區域。