如何將輸入和它的標籤添加到css風格？

我想在表中添加一些輸入以滿足對齊需要。但風格沒有工作，停下來。如何將td添加到此CSS樣式。例如，像這樣：如何將輸入和它的標籤添加到css風格？

   <p>Stuff you like:</p> 
      <table> 
       <tr> 
        <td> 
         <label for="css3">CSS3</label> 
        </td> 
        <td> 
         <input type="checkbox" value="css3" id="css3" /> 
        </td> 
       </tr> 
      </table><!-- It does not work--> 


      <p><input type="checkbox" value="HTML5" id="html5" /> 
<label for="html5">HTML5</label></p> 
      <p><input type="checkbox" value="JavaScript" id="javascript" /> 
<label for="javascript">JavaScript</label></p> 
      <p><input type="checkbox" value="Other" id="other" /> 
<label for="other">Other</label></p> 
<!--But it work--> 

/*CSS*/ 
input:hover + label, input:focus + label, 
input + label:hover, input:focus + label{ 
text-shadow: 1px 1px 3px #000; 
color: #2C7AD0; 
}

來源

2012-04-18 Mohamed Reheem

你想用JavaScript（jQuery）或HTML做到這一點？ – mfadel 2012-04-18 08:48:09

使用表格標記，label元素與任何選擇器都不匹配。 label和input元素根本不是兄弟姐妹。你需要一些不同的東西。下面的作品，與通常的CSS注意事項，對於「懸停」的一部分：

tr:hover label { ... }

關於「焦點」的一部分，我怕你不能用純CSS由於結構的限制：你不能讓元素的焦點狀態會影響元素之前的呈現。你需要爲此使用JavaScript。

來源

2012-04-18 10:09:30

檢查使用jQuery

var option = { 
    x:  1, 
    y:  2, 
    radius: 3, 
    color: "#ccff00" 
} 

$("#yourelems").textShadow(option); 
$("#yourelems").css("color","red");

來源

2012-04-18 08:50:18 mfadel

我想要更多的解釋 – 2012-04-18 09:02:14

哪裏是你的HTML代碼，這個代碼？它看起來怎樣？你嘗試什麼不會給你帶來結果。您是否將輸入放入標籤標籤或顛倒？這就是你的CSS代碼的樣子。而「+」絕對只用於javascript，而不是CSS。

當你沒有張貼您的HTML呢，我只能猜測，但你的CSS而應是這樣的：

input:hover label, input:focus label, 
input label:hover, input:focus label { 
text-shadow: 1px 1px 3px #000; 
color: #2C7AD0; 
}

或最可能

UPDATE（用這個，這應該工作）：

input, input:hover, input:focus, label, 
label:hover, label:focus { 
text-shadow: 1px 1px 3px #000; 
color: #2C7AD0; 
}

來源

2012-04-18 09:05:57 Chris

我把html代碼註釋清楚 – 2012-04-18 09:11:58

@Mohamed Reheem：是的，感謝您發佈HTML！你看，你的輸入標籤和你的標籤標籤不在彼此之內，所以它們不是父子關係。因此，你只需要用逗號分開它們，因爲它們處於同一級別......得到了它？所以，我的帖子中的第二個CSS對你來說是正確的......讓我知道，如果它適合你！ :) – Chris 2012-04-18 09:16:34

@Mohamed Reheem：請參閱第二個CSS示例中的更新 – Chris 2012-04-18 09:20:34

如何將輸入和它的標籤添加到css風格？

回答

相關問題