If I set asp-for, the stylized checkbox disappears. Net Core 6.

Question

Hi!

I have a stylized checkbox from a website template. On many pages it works well together with asp-for. But there is some kind of mysticism going on one user registration page. If I add asp-for, the checkbox just disappears somewhere. I didn't create CSS for this checkbox, but if I delete these styles, everything works as it should - but then the checkbox looks standard. What could be wrong with CSS that makes this checkbox disappear, and only on this page? But I need a stylized checkbox.

Thanks!

Checkbox CSS:

input[type="checkbox"],  
 input[type="radio"] {  
 -moz-appearance: none;  
 -webkit-appearance: none;  
 -ms-appearance: none;  
 appearance: none;  
 display: block;  
 float: left;  
 margin-right: -2em;  
 opacity: 0;  
 width: 1em;  
 z-index: -1;  
 }  
  
 input[type="checkbox"] + label,  
 input[type="radio"] + label {  
 text-decoration: none;  
 color: #646464;  
 cursor: pointer;  
 display: inline-block;  
 font-size: 1em;  
 font-weight: 400;  
 padding-left: 2.4em;  
 padding-right: 0.75em;  
 position: relative;  
 }  
  
 input[type="checkbox"] + label:before,  
 input[type="radio"] + label:before {  
 -moz-osx-font-smoothing: grayscale;  
 -webkit-font-smoothing: antialiased;  
 display: inline-block;  
 font-style: normal;  
 font-variant: normal;  
 text-rendering: auto;  
 line-height: 1;  
 text-transform: none !important;  
 font-family: 'Font Awesome 5 Free';  
 font-weight: 900;  
 }  
  
 input[type="checkbox"] + label:before,  
 input[type="radio"] + label:before {  
 background: rgba(160, 160, 160, 0.075);  
 border: solid 1px rgba(160, 160, 160, 0.3);  
 content: '';  
 display: inline-block;  
 font-size: 0.8em;  
 height: 2.0625em;  
 left: 0;  
 line-height: 2.0625em;  
 position: absolute;  
 text-align: center;  
 top: 0;  
 width: 2.0625em;  
 }  
  
 input[type="checkbox"]:checked + label:before,  
 input[type="radio"]:checked + label:before {  
 background: #3c3b3b;  
 border-color: #3c3b3b;  
 color: #ffffff;  
 content: '\f00c';  
 }  
  
 input[type="checkbox"]:focus + label:before,  
 input[type="radio"]:focus + label:before {  
 border-color: #2ebaae;  
 box-shadow: 0 0 0 1px #2ebaae;  
 }  
  
 input[type="radio"] + label:before {  
 border-radius: 100%;  
 }  

Register Page Code:

@model ApplicationUser  
@{  
    ViewData["Title"] = "Create";  
}  
<br />  
  
@inject LanguageService language  
  
<h2 class="text-info">@language.Getkey("registration")</h2>  
  
<form asp-action="Create" method="post" id="user-form" enctype="multipart/form-data">  
    <div class="p-4 rounded border">  
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>  
        <h3>@ViewBag.message</h3>  
  
        <div class="form-group row">  
            <div class="col-2">  
                <label asp-for="Login">@language.Getkey("login_name*")</label>  
            </div>  
            <div class="col-5">  
                <input asp-for="Login" class="form-control" exp/>  
            </div>  
            <span class="text-danger">@language.Getkey("login_requires")</span>  
        </div>  
  
        <div class="form-group row">  
            <div class="col-2">  
                <label asp-for="Email">@language.Getkey("email*")</label>  
            </div>  
            <div class="col-5">                  
                <input asp-for="Email" class="form-control"/>  
            </div>  
            <span class="text-danger">@language.Getkey("required")</span>  
        </div>  
  
        <br></br>  
  
        <div class="form-group row">  
            <div class="col-2">  
                <label asp-for="PasswordHash">@language.Getkey("password*")</label>  
            </div>  
            <div class="col-5">  
                <form action="">  
                <div class="form-item">  
                    <input asp-for="PasswordHash" type="password" class="form-control form-control-lg" id="password" placeholder="password"/>  
                </div>  
                </form>  
            </div>  
            <span class="text-danger">@language.Getkey("password_requires")</span>  
        </div>  
  
        <br></br>  
  
        <div class="form-group row">  
            <div class="col-2">                  
                <label asp-for="FirstName">@language.Getkey("first_name*")</label>  
            </div>  
            <div class="col-5">  
                <input asp-for="FirstName" class="form-control"/>  
            </div>  
            <span class="text-danger">@language.Getkey("required")</span>  
        </div>  
  
        <div class="form-group row">  
            <div class="col-2">  
                <label asp-for="LastName">@language.Getkey("last_name*")</label>  
            </div>  
            <div class="col-5">  
                <input asp-for="LastName" class="form-control" />  
            </div>  
            <span class="text-danger">@language.Getkey("required")</span>  
        </div>  
  
        <br></br>  
  
        <div class="form-group row">  
  
            <div class="checkbox">  
  
                <div class="form-check">  
                    <input type=checkbox asp-for="SendNews" class="form-check-input" id="checkNews"/>  
                    <label class="form-check-label" asp-for="SendNews" for="checkNews">@language.Getkey("news")</label>  
                </div>  
  
            </div>  
  
        </div>  
  
        <div class="form-group">  
            <a asp-area="Customer" asp-action="Index" asp-controller="Home" class="button large">@language.Getkey("general")</a>  
            <input type="submit" class="button large" value="@language.Getkey("register")"/>  
  
        </div>  
    </div>  
</form>  
  
@section Scripts{  
  
    @{  
        await Html.RenderPartialAsync("_ValidationScriptsPartial");  
    }  
  
        <script>  
            $(document).ready(function () {  
                $("#user-form").validate({  
                    rules: {  
                         Login : {  
                            required: true  
                         },  
                         Email : {  
                            required: true  
                         },  
                         PasswordHash : {  
                            required: true  
                         },  
                         FirstName : {  
                            required: true  
                         },  
                         LastName : {  
                            required: true  
                         }  
                    },  
                    messages: {  
                          Login: '@language.Getkey("unique_login_is_required")',  
                          Email: '@language.Getkey("email_is_required")',  
                          PasswordHash: '@language.Getkey("password_is_required")',  
                          FirstName: '@language.Getkey("first_name_is_required")',  
                          LastName: '@language.Getkey("last_name_is_required")'  
                    }  
                });  
            });  
        </script>  
}  

if I delete asp-for like this, I see css checkbox (but I need asp-for):

<div class="form-group row">  
  
            <div class="checkbox">  
  
                <div class="form-check">  
                    <input type=checkbox class="form-check-input" id="checkNews"/>  
                    <label class="form-check-label" for="checkNews">@language.Getkey("news")</label>  
                </div>  
  
            </div>  
  
        </div>  

Answer 1

Hi @Volk Volk ,

As we all known, when using the asp-for attribute, after rendering, it will auto generate the id name and value attribute.

The purpose of using the asp-for on the checkbox, I think you want to use it to set the default value, and then send the selected value to the back-end action method, right?

So, in your case, you can modify the code as below: directly use the name, value and checked attribute to display the value and return it to the back-end.

<div class="form-check">  
    <input type=checkbox name="SendNews" checked="@Model?.SendNews" value="true" class="form-check-input" id="checkNews"/>  
    <label class="form-check-label" name="SendNews" for="checkNews">News</label>  
</div>  

Then, the result as below: as we can see, after submit the form, if we checked the checkbox, the SendNews is true, otherwise, it is false.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

*** Please take a moment to debug your code using the browser's dev tools. Simply render the page using the asp-for. Right click where the checkbox should appear and click inspect. Then look for the checkbox input in the HTML. Once you find the checkbox then review the styles applied to the checkbox. There are style checkboxes that you can uncheck to see if doing so changes the display.

If the checkbox does not exist then there are other issues with your code probably on the server.

Lastly, you applied a class (form-check-input) to the checkbox that does not exist in the sample CSS you've shared. ***

Thanks for the answer! Here's what I see in the browser's debug. For some reason, this appears, although I don't put it anywhere (Where does it come from? This only appears if I set asp-for):
<input name="SendNews" type="hidden" value="false">

This form-check-input does not affect anything.
There is here: wwwroot\lib\bootstrap\dist\css\bootstrap.css

.form-check {  
  display: block;  
  min-height: 1.5rem;  
  padding-left: 1.5em;  
  margin-bottom: 0.125rem;  
}  
.form-check .form-check-input {  
  float: left;  
  margin-left: -1.5em;  
}  
  
.form-check-input {  
  width: 1em;  
  height: 1em;  
  margin-top: 0.25em;  
  vertical-align: top;  
  background-color: #fff;  
  background-repeat: no-repeat;  
  background-position: center;  
  background-size: contain;  
  border: 1px solid rgba(0, 0, 0, 0.25);  
  -webkit-appearance: none;  
  -moz-appearance: none;  
  appearance: none;  
  -webkit-print-color-adjust: exact;  
  color-adjust: exact;  
}  
.form-check-input[type=checkbox] {  
  border-radius: 0.25em;  
}  
.form-check-input[type=radio] {  
  border-radius: 50%;  
}  
.form-check-input:active {  
  filter: brightness(90%);  
}  
.form-check-input:focus {  
  border-color: #86b7fe;  
  outline: 0;  
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);  
}  
.form-check-input:checked {  
  background-color: #0d6efd;  
  border-color: #0d6efd;  
}  
.form-check-input:checked[type=checkbox] {  
  background-image: url("data:image/svg+xml,%3csvg xmlns='%3e");  
}  
.form-check-input:checked[type=radio] {  
  background-image: url("data:image/svg+xml,%3csvg xmlns='%3e");  
}  
.form-check-input[type=checkbox]:indeterminate {  
  background-color: #0d6efd;  
  border-color: #0d6efd;  
  background-image: url("data:image/svg+xml,%3csvg xmlns='%3e");  
}  
.form-check-input:disabled {  
  pointer-events: none;  
  filter: none;  
  opacity: 0.5;  
}  
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {  
  opacity: 0.5;  
}  
  
.form-switch {  
  padding-left: 2.5em;  
}  
.form-switch .form-check-input {  
  width: 2em;  
  margin-left: -2.5em;  
  background-image: url("data:image/svg+xml,%3csvg xmlns='%3e");  
  background-position: left center;  
  border-radius: 2em;  
  transition: background-position 0.15s ease-in-out;  
}  
@media (prefers-reduced-motion: reduce) {  
  .form-switch .form-check-input {  
    transition: none;  
  }  
}  
.form-switch .form-check-input:focus {  
  background-image: url("data:image/svg+xml,%3csvg xmlns='%3e");  
}  
.form-switch .form-check-input:checked {  
  background-position: right center;  
  background-image: url("data:image/svg+xml,%3csvg xmlns='%3e");  
}  
  
.form-check-inline {  
  display: inline-block;  
  margin-right: 1rem;  
}  
  
.btn-check {  
  position: absolute;  
  clip: rect(0, 0, 0, 0);  
  pointer-events: none;  
}  
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {  
  pointer-events: none;  
  filter: none;  
  opacity: 0.65;  
}