<!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>
</head>
<body>
<form action="">
<fieldset>
<legend>个人中心登录</legend>
<label >用户姓名:<input type="text">
</label>
<br>
<label for="tips">警告:</label>
<input type="text" id="urname" value="没注册别乱点 没为什么" disabled style="border: none;">
<div>
<label for="g">性别:</label>
<input type="radio" name="sex" id="male" value="0" checked>
<label for="male">男</label>
<input type="radio" name="sex" id="female" value="1" >
<label for="female">女</label>
<input type="radio" name="sex" id="seceret" value="3" >
<label for="male">秘密</label>
</div>
<button>提交</button>
</fieldset>
</form>
<style>
input:disabled {
color:green;
background-color: #ccc;
}
input:checked + label {
color: palevioletred;
}
input:focus {
background-color: lightsalmon;
}
button {
height: 30px;
border-radius: 40%;
outline: none;
background-color: lightseagreen;
border: 1px;
color: blanchedalmond;
}
button:hover {
cursor: pointer;
background-color: violet;
}
</style>
</body>
</html>