一款優(yōu)美的密碼輸入框可以完美地讓用戶輸入密碼時(shí)心情放松，簡(jiǎn)單易用，下面是它的HTML和CSS代碼：

<div class="form-item">
<input type="password" name="password" required>
<span>Password</span>
</div>

.form-item{
position:relative;
margin-bottom:20px;
padding-left:50px;
width:100%;
}
.form-item input{
border:none;
border-bottom:2px solid #bdc3c7;
font-size:18px;
padding-bottom:5px;
width:100%;
outline:none;
}
.form-item span{
position:absolute;
top:8px;
left:10px;
transition:all 0.2s ease;
font-size:20px;
color:grey;
}
.form-item input:focus + span{
top:-13px;
font-size:16px;
}
.form-item input:focus{
border-color:#3498db;
}

其中，<div class="form-item">代表整個(gè)密碼輸入框部分，<input type="password" name="password">代表密碼輸入框，輸入的內(nèi)容會(huì)以星號(hào)顯示。使用<span>標(biāo)簽添加輸入框名稱，樣式通過(guò)CSS實(shí)現(xiàn)：

.form-item {
position:relative;
}
.form-item span{
position:absolute;
top:8px;
left:10px;
transition:all 0.2s ease;
font-size:20px;
color:grey;
}

輸入框容器<div class="form-item">通過(guò)position:relative實(shí)現(xiàn)相對(duì)定位，而輸入框名稱<span>通過(guò)position:absolute實(shí)現(xiàn)絕對(duì)定位，讓其能夠覆蓋在輸入框上方。

使用CSS偽類:focus，可以在輸入框獲得焦點(diǎn)時(shí)改變其樣式，這種反饋可以提高用戶的交互體驗(yàn)。

.form-item input:focus + span{
top:-13px;
font-size:16px;
}
.form-item input:focus{
border-color:#3498db;
}

在輸入框獲得焦點(diǎn)時(shí)，使用border-color:#3498db;改變邊框顏色，top:-13px;font-size:16px;強(qiáng)制將輸入框名稱<span>移動(dòng)到輸入框上方，變小一些，這通過(guò)CSS的過(guò)渡動(dòng)畫完成。

最終結(jié)果是一款簡(jiǎn)單美觀的密碼輸入框，可以提高用戶的使用體驗(yàn)。