Css 如何修改MVC4中“CheckBoxFor”的隐藏自动生成复选框?
正如许多人所说的那样,Css 如何修改MVC4中“CheckBoxFor”的隐藏自动生成复选框?,css,asp.net-mvc-4,razor,checkbox,html-helper,Css,Asp.net Mvc 4,Razor,Checkbox,Html Helper,正如许多人所说的那样,MVC的Html助手生成了一个隐藏的复选框,但是我找不到如何修改自动生成的复选框输入的类。问题在于隐藏的复选框以某种方式干扰了正常复选框,并破坏了css的外观。出于这个原因,我需要更新隐藏复选框以包含与普通复选框相同的css类。有没有可能用MVC更好地做到这一点 服务器Htmlhelper: @Html.CheckBoxFor(m => m.IsActive, new { @class="px"}) <span class="lbl">Active use
MVC
的Html
助手生成了一个隐藏的复选框,但是我找不到如何修改自动生成的复选框输入的类。问题在于隐藏的复选框以某种方式干扰了正常复选框,并破坏了css
的外观。出于这个原因,我需要更新隐藏复选框以包含与普通复选框相同的css类。有没有可能用MVC更好地做到这一点
服务器Html
helper:
@Html.CheckBoxFor(m => m.IsActive, new { @class="px"})
<span class="lbl">Active user</span>
您可以始终使用jquery添加类名,但隐藏的输入如何干扰?如果您注意到两个复选框具有相同的名称,则
class=“px”
会对复选框应用样式。我相信这种“双重性”会导致css出现问题,因此复选框不可见。当我使用chrome开发工具删除类或隐藏复选框时,它会显示出来。是的,我知道两个复选框都有相同的名称(这就是它应该的名称)。px
风格的定义是什么?@JorgeCode这种“双重性”不会以任何方式影响css。请发布您的CSSY您有许多选择器使用gt-ie8 input.px+.lbl
或类似的选择器,它们选择.lbl
span,该span位于.px
复选框之后,但是.px
输入之后没有.lbl
元素(紧跟在.px
输入之后的元素是隐藏的输入)。您需要更改选择器(可以是gt-ie8.lbl
)
<input class="px" data-val="true" data-val-required="This field is required." id="IsActive" name="IsActive" type="checkbox" value="true">
<input name="IsActive" type="hidden" value="false">
<span class="lbl">Active user</span>
.gt-ie8 input.px {
position: absolute !important;
left: -1000000px !important;
margin: 0 !important;
padding: 0 !important;
}
.gt-ie8 input.px + .lbl {
position: relative;
padding-left: 1px;
display: inline-block;
}
.gt-ie8 input.px + .lbl:before {
content: "";
opacity: 1;
border: 1px solid #bbb;
background: #fff;
display: block;
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.2s;
transition: all 0.2s;
cursor: pointer;
}
.gt-ie8 input.px + .lbl:after {
display: none;
position: absolute;
}
.gt-ie8 input.px:checked + .lbl:after {
display: block;
}
.gt-ie8 input.px + .lbl:before,
.gt-ie8 input.px + .lbl:after {
margin: 2px 3px -3px -20px !important;
}
.gt-ie8 input[type="checkbox"].px + .lbl:before {
border-radius: 2px;
}
.gt-ie8 input[type="checkbox"].px + .lbl:after {
content: "\f00c";
top: 1px;
left: 1px;
width: 13px;
height: 15px;
line-height: 15px;
font-size: 11px;
font-family: FontAwesome;
text-align: center;
}
.gt-ie8 input[type="radio"].px + .lbl:before {
border-radius: 999999px;
}
.gt-ie8 input[type="radio"].px + .lbl:after {
content: "";
width: 5px;
height: 5px;
border-radius: 999px;
top: 5px;
left: 5px;
}
.gt-ie8 input.px:disabled,
.gt-ie8 input.px.disabled,
.gt-ie8 input.px:disabled + .lbl,
.gt-ie8 input.px.disabled + .lbl,
.gt-ie8 input.px:disabled + .lbl:before,
.gt-ie8 input.px.disabled + .lbl:before,
.gt-ie8 input.px:disabled + .lbl:after,
.gt-ie8 input.px.disabled + .lbl:after {
cursor: not-allowed !important;
}
.gt-ie8 input.px:disabled + .lbl:before,
.gt-ie8 input.px.disabled + .lbl:before {
background: #eee !important;
border-color: #d6d6d6 !important;
}
.gt-ie8 input.px:disabled + .lbl:after,
.gt-ie8 input.px.disabled + .lbl:after {
opacity: .5 !important;
}