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

我彼此相邻有两个字段集，我希望它们每个都具有不同的背景颜色。显然，只需更改fieldset的背景颜色，将所有这些都更改为相同的颜色，这不是我想要的，因为您可以看到我已经用名称分配了每个fieldset，但我无法使背景颜色与众不同：

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

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

您需要定义类而不是名称，然后样式的这些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>

我将使用class或id属性来分配CSS规则：<fieldset class="fieldset1">或<fieldset id="fieldset1">代替<fieldset name="fieldset1">

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

.fieldset1 { 
  ...
}

或IDS：

#fieldset1 { 
  ...
}

相关内容

最新更新

热门标签：