C#MVC 5 - 让Html.CheckBox()先渲染隐藏的输入,然后再输入复选框

时间:2016-09-30 11:10:21

标签: c# html css asp.net-mvc checkbox

我们都知道数据Htmlhelper Html.CheckBox(m => m.SomeField)呈现两个输入字段:

<input id="Model_SomeFields" name="Model_SomeFields" type="checkbox" value="true">
<input name="Model_SomeFields" type="hidden" value="false">

我可以以某种方式操纵顺序,以便首先渲染隐藏字段吗?

我想要这个HTML输出:

<input name="Model_SomeFields" type="hidden" value="false">
<input id="Model_SomeFields" name="Model_SomeFields" type="checkbox" value="true">

为什么我要这样做是因为我们非常局限于我们可以更改的CSS规则,并且设计者添加了一个规则,只有当标签直接位于input[type=checkbox]之后时才会在我们的复选框中添加某些设计。由于隐藏的输入位于复选框和标签之间,因此它与设计混淆。

CSS:

input[type="checkbox"] + label { padding-left:45px; position:relative; color:#383838; line-height:normal; font-size:14px; display: flex;font-family: 'proxima_novasemibold'; min-height:29px; align-items: center; cursor:pointer; transition:background-color 0.3s linear}
input[type="checkbox"] + label:after { content:""; display:block; position:absolute; left:0; top:0; width:29px; height:29px; margin:0; vertical-align:middle; background:#a3a3a3 no-repeat center; background-size:100%; cursor:pointer; box-sizing:border-box;}
input[type="checkbox"]:checked + label:after { background-image: url(../images/checkbox.png); background-size:100%; background-color:#044f5f}

0 个答案:

没有答案