Question

我想在红色边框内应用背景颜色，但黄色圆圈除外。

这是我的代码并帮我解决问题：

<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>

提前感谢您的帮助。

Answer 1

您需要将定义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>

Answer 2

将样式背景颜色添加到字段集

fieldset {background-color: green;}

Answer 3

我不确定我是否理解你的问题。但是尝试为这样的字段集添加背景颜色：

fieldset{
    margin-right: 0;
    margin-left: 0;
    background-color: #ececec;
  border-color:red;
}

如何应用背景颜色

3 个答案: