html - CSS 在 ASP.NET 样板中不起作用

Question

我正在尝试为文本类型的输入实现与我们在 CreateUser 默认页面中类似的相同 CSS。因此，当您单击用户名文本框时，它会在其下方显示一条蓝线。同样，我在我的页面上尝试过它工作正常，但是当我转到其他页面并再次来到此页面时，它不会在文本框下方显示蓝线。

创建用户组件

<div bsModal #createUserModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="createUserModal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog">

        <div #modalContent class="modal-content">

            <form *ngIf="active" #createUserForm="ngForm" id="frm_create_user" novalidate (ngSubmit)="save()">
                <div class="modal-header">
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <span>{{l("CreateNewUser")}}</span>
                    </h4>
                </div>
                <div class="modal-body">

                    <ul class="nav nav-tabs tab-nav-right" role="tablist">
                        <li role="presentation" class="active"><a href="#user-details" data-toggle="tab">User Details</a></li>
                        <li role="presentation"><a href="#user-roles" data-toggle="tab">User Roles</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane animated fadeIn active" id="user-details">

                            <div class="row clearfix" style="margin-top:10px;">
                                <div class="col-sm-12">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input id="username" type="text" name="UserName" [(ngModel)]="user.userName" required maxlength="32" minlength="2" class="validate form-control">
                                            <label for="username" class="form-label">{{l("UserName")}}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

mypage.html

<div class="row clearfix" [@routerTransition]>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card main-content">
            <div class="row" style="background-color:white;">
                <div class="header">
                    <h2>
                        {{l('MyPage: ADD/EDIT')}}
                    </h2>
                </div>
                <br />
                <form *ngIf="active" #myForm="ngForm" id="frm_create_store" novalidate (ngSubmit)="onSubmitBtnClick(myForm)">
                    <div class="col-md-12">
                        <div class="form-group form-float">
                            <label for="myName" class="form-label">{{l("myName")}}</label>
                            <div class="form-line">
                                <input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
                            </div>
                        </div>
                    </div>

Answer 1

我认为您需要在具有 class="form-line"的 div 中使用 form="myName"进行标记。

代替；

<label for="myName" class="form-label">{{l("myName")}}</label>
<div class="form-line">
    <input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>

试试这个；

<div class="form-line">
    <label for="myName" class="form-label">{{l("myName")}}</label>
    <input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>