css - 复选框始终使用不透明度 :0 创建

Question

我正在尝试在我的 mvc 表单中添加复选框，但它总是在 css 中创建时具有 opcaity:0 这是我添加复选框的代码

<div class="col-md-3 px-1">
   <div class="form-group">
     <label>Is Suspended</label>                                                                
     @Html.CheckBox("IsSuspended", false, new { @checked = "checked", @class = "form-control "})
   </div>
</div> 

当我在我放置复选框的浏览器中使用检查元素时，我发现不透明度:0 但我不知道为什么它会被添加到我的复选框中，或者我是否使用了错误的东西

<input class="form-control " id="IsSuspended" name="IsSuspended" type="checkbox" 
       value="true" style="position: absolute; opacity: 0;">

Answer 1

您的元素中有一段额外的代码，用于添加 style="position: absolute; opacity: 0;"。在我的电脑上，我只显示 input 而没有额外的“样式”。

<input class="form-control " id="IsSuspended" name="IsSuspended" type="checkbox" value="true">

要查找来源，请使用 Google Chrome 浏览器中的 inspect 功能，并在 Computed 选项卡中单击属性以查看其来源。您将看到额外的 position 和 opacity 样式的原因。

下面的例子显示了一个元素的border-right-color是由.form-control类设置的，它在form-less中定义 文件。您可以对 position 和 opacity 执行相同的操作。