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

Volk Volk 571 Reputation points
2022-09-22T08:16:36.42+00:00

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!

243814-reg-page.png

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%;  
 }  

243728-reg-page-no-css.png

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>  

243778-reg-page-css-no-asp-for.png

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,249 questions
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,046 Reputation points Microsoft Vendor
    2022-09-23T03:43:07.44+00:00

    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.

    244114-1.gif


    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

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
  1. Volk Volk 571 Reputation points
    2022-09-22T15:56:11+00:00

    *** 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">

    243962-aaa.png
    243914-bbb.png
    243915-ccc.png

    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;  
    }