除了那个黄色圆圈，我想在红色边框内应用背景色。
这是我的代码并帮助我解决我的问题:
http://codepen.io/mgkrish/pen/YNwqVO
<html>
<head>
<title>newtab</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body{
background-color: #f5683d;
}
legend i{
font-size: 52px !important;
padding: 24px;
padding-left: 33px;
padding-right: 33px;
color:#ffffff;
background-color: #ffd200;
border: 1px solid #ffd200;
border-radius: 168px;
}
form{
width: 300px;
margin: 0 auto;
background-color: #ececec;
}
input{
margin-bottom: 20px;
width: 264px;
height: 40px;
text-align: center;
border:none;
color:#717171;
}
a{
padding-left: 29%;
text-decoration: none;
color:#f5683d;
}
#loginbutton{
background-color: #4591fb;
color:#ececec;
}
fieldset{
margin-right: 0;
margin-left: 0;
border-color:red;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend style="margin:0 auto;"><i class="fa fa-user"></i></legend>
<div>
<h1 style="font-size: 29PX; color:#717171;text-align: center;"> Member Login</h1>
<input type="name" name="username" placeholder="username" >
<br>
<input type="password" name="pswd" placeholder="password" >
<br>
<input type="button" value="LOGIN" id="loginbutton" >
<a href="#">Forgot Password?</a>
</div>
</form>
</body>
在此先感谢您的帮助。
最佳答案
您需要将定义 background-color: #ececec; 从 form 移动到 fieldset
http://codepen.io/anon/pen/EZPKRo
<html>
<head>
<title>newtab</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body{
background-color: #f5683d;
}
legend i{
font-size: 52px !important;
padding: 24px;
padding-left: 33px;
padding-right: 33px;
color:#ffffff;
background-color: #ffd200;
border: 1px solid #ffd200;
border-radius: 168px;
}
form{
width: 300px;
margin: 0 auto;
}
input{
margin-bottom: 20px;
width: 264px;
height: 40px;
text-align: center;
border:none;
color:#717171;
}
a{
padding-left: 29%;
text-decoration: none;
color:#f5683d;
}
#loginbutton{
background-color: #4591fb;
color:#ececec;
}
fieldset{
margin-right: 0;
margin-left: 0;
border-color:red;
background-color: #ececec;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend style="margin:0 auto;"><i class="fa fa-user"></i></legend>
<div>
<h1 style="font-size: 29PX; color:#717171;text-align: center;"> Member Login</h1>
<input type="name" name="username" placeholder="username" >
<br>
<input type="password" name="pswd" placeholder="password" >
<br>
<input type="button" value="LOGIN" id="loginbutton" >
<a href="#">Forgot Password?</a>
</div>
</form>
</body>
关于html - 如何应用背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41571261/