无法在页面上应用CSS来控制

时间:2013-07-04 06:55:22

标签: css

我有以下.aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Control</title>
    <style type="text/css">

        input[type="radio"][checked]  +label 
         {
             font-weight: bold; 
             color: Green;
         }
         input[type="radio"][disabled] +label 
         {
             font-weight: bold; 
             color: Green;
         }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="radio" name="abc" value="val1" disabled="disabled"/>val1<br/>
    <input type="radio" name="abc" value="val2"/>val2
    <input type="radio" name="abc" value="val3"/>val3

    </div>
    </form>
</body>
</html>

我在这里做错了吗? 因为我在标签中定义的css样式没有隐含在页面上。 这是所述样本的JSFiddle

根据代码,禁用按钮应为绿色,但不是.. 同样适用于选中的

2 个答案:

答案 0 :(得分:4)

您尚未声明单选按钮的标签......请执行此操作。

<input id="abc1" type="radio" name="abc" value="val1" disabled="disabled"/><label for="abc1">val1</label><br/>
<input id="abc2" type="radio" name="abc" value="val2" checked="checked"/><label for="abc2">val2</label>

答案 1 :(得分:3)

您应该在标签

中放置单选按钮文本
<input type="radio" id="val1" name="abc" value="val1" disabled="disabled"/>
<label for="val1">val1</label>

然后你可以使用你的css选择器

input[type="radio"]:checked+label
{
   font-weight: bold; 
   color: Green;
}
input[type="radio"]:disabled+label
{
    font-weight: bold; 
    color: Green;
}