在ASP.Net上设置复选框ItemStyle ForeColor DetailsView和GridView

Question

在ASP.Net DetailsView和GridView上，我注意到CheckBoxes中的刻度标记是浅灰色（禁用）颜色，即使我将它设置为蓝色。

<asp:CheckBoxField DataField="DayOfWeekMonday" HeaderText="Monday:" SortExpression="DayOfWeekMonday"> 
    <ItemStyle ForeColor="Blue" /> 
</asp:CheckBoxField> 

当CheckBox是一个TemplateField时，会发生同样的事情。

<asp:TemplateField HeaderText="Monday:" SortExpression="DayOfWeekMonday"> 
    <EditItemTemplate> 
     <asp:CheckBox ID="CheckBoxEditDayOfWeekMonday" runat="server" Checked='<%# Bind("DayOfWeekMonday") %>' /> 
    </EditItemTemplate> 

    <InsertItemTemplate> 
     <asp:CheckBox ID="CheckBoxInsertDayOfWeekMonday" runat="server" Checked='<%# Bind("DayOfWeekMonday") %>' /> 
    </InsertItemTemplate> 

    <ItemTemplate> 
     <asp:CheckBox ID="CheckBoxItemDayOfWeekMonday" runat="server" Checked='<%# Bind("DayOfWeekMonday") %>' Enabled="false" /> 
    </ItemTemplate> 

    <ItemStyle ForeColor="Blue" /> 
</asp:TemplateField> 

我也在代码隐藏文件中试过这个。

Protected Sub CheckBoxItemDayOfWeekMonday_DataBinding(sender As Object, e As EventArgs) 

    Dim theControl As CheckBox 

    theControl = DetailsView.FindControl("CheckBoxItemDayOfWeekMonday") 
    theControl.ForeColor = Drawing.Color.Blue 

End Sub 

有没有办法像我们其他的字段和列一样将其更改为蓝色？

Answer 1

我注意到你的意思是复选框内的刻度线，而不是前景色。我不认为你可以改变这一点，因为这是非常依赖操作系统。我已经在过去用图像实现了这一点。你可以尝试这些CSS3的CheckBox它采用图像：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

样品：

HTML：

<span><input type="checkbox" id="c1" name="cc" /> 
<label for="c1"><span></span>Check Box 1</label> 
</span> 

CSS：

input[type="checkbox"] { 
    display:none; 
} 

input[type="checkbox"] + label { 
    color:#000000; 
    font-family:Arial, sans-serif; 
    font-size:14px; 
} 

input[type="checkbox"] + label span { 
    display:inline-block; 
    width:19px; 
    height:19px; 
    margin:-1px 4px 0 0; 
    vertical-align:middle; 
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat; 
    cursor:pointer; 
} 

input[type="checkbox"]:checked + label span { 
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat; 
} 

的jsfiddle：http://jsfiddle.net/4FraV/2/