如何使用HTML和CSS更改两个/多个不同字段集的背景颜色？

Question

我在左浮动位置有两个相邻的字段集，我希望它们中的每一个都具有不同的背景色。 显然，仅更改字段集的背景颜色会将它们全部更改为相同的颜色，这不是我想要的，因为您可以看到我为每个字段集分配了名称，但是我无法获得不同的背景色：

在CSS中：

    fieldset{
background-color: aquamarine;
border: none;
float: left;
font-style: italic;

在HTML中：

     </head>
    <h1 span class="white">Info Day</span> <span class="blue">Registration</span></h1>
<body>
    <form name="form1" onsubmit="return validateForm()" method="post">
        <fieldset name="fieldset1">
        <legend>Step 1</legend>
        How many people will be attending?
            <select name = step1 id="step1" onchange="showField()">
            <option value="0">Please Choose</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            </select>
        <br>
        <div id="divName"></div>
        <img id="check" src="check.png">
        </fieldset> 
    </form>

  <form name="form2" onsubmit="return validateForm()" method="post">
        <fieldset name= "fieldset2">
        <legend>Step 2</legend>
            Would you like your company name on your badges?<br>
            <input type="radio">Yes<input type="radio">No
        <br>
        <div id="company"></div>
        Will anyone in your group require special accommodations?<br>
       (if yes) Please explain below:<br>
        <input type="radio" name="Yes" value="Yes">Yes<input type="radio" name="No" value="No">No
        </fieldset>
    </form>

Answer 1

fieldset[name=fieldset1]{
   background-color: color;
}

fieldset[name=fieldset2]{
    background-color: color2;
}

Answer 2

您将要定义类而不是名称，然后设置那些CSS类的样式。 这是一个正在运行的示例：

 .fieldset1 { background-color: aquamarine; } .fieldset2 { background-color: green; }

 <h1 span class="white">Info Day</span> <span class="blue">Registration</span></h1> <body> <form name="form1" onsubmit="return validateForm()" method="post"> <fieldset class="fieldset1"> <legend>Step 1</legend> How many people will be attending? <select name=s tep1 id="step1" onchange="showField()"> <option value="0">Please Choose</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <br> <div id="divName"></div> <img id="check" src="check.png"> </fieldset> </form> <form name="form2" onsubmit="return validateForm()" method="post"> <fieldset class="fieldset2"> <legend>Step 2</legend> Would you like your company name on your badges? <br> <input type="radio">Yes <input type="radio">No <br> <div id="company"></div> Will anyone in your group require special accommodations? <br>(if yes) Please explain below: <br> <input type="radio" name="Yes" value="Yes">Yes <input type="radio" name="No" value="No">No </fieldset> </form>

Answer 3

我会使用class或id属性来分配CSS规则： <fieldset class="fieldset1">或<fieldset id="fieldset1">而不是<fieldset name="fieldset1">

然后在CSS中，您可以将其用于类：

.fieldset1 { 
  ...
}

或ID：

#fieldset1 { 
  ...
}

如何使用HTML和CSS更改两个/多个不同字段集的背景颜色？

问题描述

3 个解决方案

解决方案1
1 2016-12-07 22:36:31

解决方案2
0 已采纳 2016-12-07 22:35:36

解决方案3
0 2016-12-07 22:39:03

如何使用HTML和CSS更改两个/多个不同字段集的背景颜色？

问题描述

3 个解决方案

解决方案1 1 2016-12-07 22:36:31

解决方案2 0 已采纳 2016-12-07 22:35:36

解决方案3 0 2016-12-07 22:39:03

解决方案1
1 2016-12-07 22:36:31

解决方案2
0 已采纳 2016-12-07 22:35:36

解决方案3
0 2016-12-07 22:39:03