<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)";
				}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.