The rendered result for Html.DisplayFor on a boolean value is a disabled checkbox. I just want to change its color. I've looked on many websites, including this one, but most of the help around this topic is for people who want to change the display to between two text values.
I created a custom css file and referenced it in my layout page, but it does not do anything.
input[type="checkbox"].disabled {
color: #ccc
}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - ASI Dashboard</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/styles/custom.css"/>
@RenderSection("Style",false)
</head>
Declared the section in my razor page.
@section style{
}
I can see in the chrome inspector that the HTML is written such that @Html.DisplayFor(model => model.xx.yy) returns <input class="check-box" disabled="disabled" type="checkbox"/> on my page. The types match, so why does the color still not change? I know I must be missing something. What am I doing wrong?
EDIT: After looking at the element itself, I found that it is inheriting the general "disabled" style. Do I need to override this, and if so, how would I accomplish that? I don't want to override the style for everything disabled, only checkboxes.
input:disabled {
color: -internal-light-dark-color(rgb(84, 84, 84), rgb(170, 170, 170));
cursor: default;
}
Aucun commentaire:
Enregistrer un commentaire