如何将输入和它的标签添加到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风格？

回答

相关问题