HTMLとCSSを使用して2つ以上の異なるフィールドセットの背景色を変更するにはどうすればよいですか？

フロート左に2つのフィールドセットがあります。それぞれのフィールドの背景色が異なるようにしたいと思います。明らかに、フィールドセットの背景色を変更するだけで、すべてが同じ色に変わります。これは私が望む通りではありません。各フィールドセットに名前を割り当てていますが、：CSSでHTMLとCSSを使用して2つ以上の異なるフィールドセットの背景色を変更するにはどうすればよいですか？

：HTMLで

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

：

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

出典

2016-12-07 Gerrit ten Napel

あなたはそれらのCSSクラスのスタイル、クラスの代わりに名前を定義することをお勧めします。あなたができるCSSに続いて<fieldset class="fieldset1">または<fieldset id="fieldset1">の代わり<fieldset name="fieldset1">

：

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

出典

2016-12-07 22:35:36 dave

彼らの狭い特異性のためにCSSセレクタのIDを使用することをお勧めしません。 https://github.com/CSSLint/csslint/wiki/Disallow-ids-in-selectors –

@JonUleis ok代わりにクラスを使用する答えを変更しました – dave

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

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

出典

2016-12-07 22:36:31 codycodes

引用符がありません。それ以外の場合、あなたの答えは最も簡単です。 – Dre

私はCSSルールを割り当てるためclassまたはid属性を使用します。ここで実行している例ですクラスのためにこれを使用してください：

IDの

またはこの：

#fieldset1 { 
    ... 
}

出典

2016-12-07 22:39:03 Johannes

なぜ 'name'属性を使わないのですか？ – Dre

はい：http://codepen.io/anon/pen/eBKYqP。任意の属性をセレクタとして使用できます。 – Dre

HTMLとCSSを使用して2つ以上の異なるフィールドセットの背景色を変更するにはどうすればよいですか？

答えて

関連する問題