<div id="img" class="img"></div>
<form class="block">
帳號:<input placeholder="請輸入您的帳號" name="a" type="text" required />
<br>
密碼:<input onfocus="PW_Focus()" onblur="PW_Onblur()" type="password" placeholder="請輸入您的密碼" name="p" required />
</form>
body {
background: #f6f6f6;
font-family: Arial, 'Microsoft JhengHei', sans-serif;
margin: 0;
padding: 0;
color: #2f2f2f;
text-align: center;
}
* {
box-sizing: border-box;
}
.img {
width: 200px;
height: 173px;
padding: 0;
margin: 20px auto;
background-size: 200px 173px !important;
filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, .3));
background: url(https://i.imgur.com/oIgBPWJ.png);
}
.block {
width: 250px;
margin: 20px auto;
padding: 20px;
background: #FFF;
box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 15px 0;
border-radius: 10px;
}
//密碼焦點更改上方圖示
function PW_Focus() {
document.getElementById('img').style.background = "url(https://i.imgur.com/NNsKwtp.png)";
}
//密碼非焦點更改上方圖示
function PW_Onblur() {
document.getElementById('img').style.background = "url(https://i.imgur.com/oIgBPWJ.png)";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.