我们都知道数据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}