目录
1. 世纪佳缘 用户名 显示隐藏内容
这里和京东密码框有些不同的是
京东密码框,当你点击焦点进行输入的时候,里面的文字颜色是黑色的
世纪家园点击输入的时候里面的文字颜色是灰色的
当失去焦点的时候,京东密码框则显示灰色
而世纪佳缘失去焦点的时候,密码框里面的文字显示黑色
世纪佳缘网站里面的 input边框颜色是粉色
outline-color: palevioletred;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #fce5e7;
}
.header {
width: 100%;
height: 100px;
background-color: #fff;
text-align: center;
line-height: 100px;
}
.header p {
display: inline-block;
font-size: 18px;
color: palevioletred;
margin-right: 10px;
}
.header input {
height: 20px;
outline-color: palevioletred;
}
.header .text {
padding-left: 10px;
color: #999;
}
.header button {
width: 50px;
height: 26px;
background-color: #0098c2;
border: 0;
line-height: 26px;
color: white;
}
</style>
</head>
<body>
<div class="header">
<p>世纪佳缘:婚恋网站</p>
<input type="text" value="邮箱/ID/手机号" class="text">
<input type="password" name="密码" id="密码" class="pwd">
<button>登录</button>
<script>
var text = document.querySelector('.text');
text.onfocus = function () {