ASP.NET Boilerplate 中 CSS 无效。

Question

我正在尝试实现与CreateUser默认页面相似的文本框CSS样式，使得单击“用户名”文本框时，显示一个蓝色线条。我在我的页面上尝试过这个样式，它可以正常工作，但是当我转到其他页面后再次回到此页面时，该文本框下不再显示蓝色线条。

create-user.component

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

- Vivek Nuna

---

在stackblitz.com上创建一个示例，这样会更容易。或者发布一些更多的代码（如果您正在使用angular动画，则为css、组件）。 - David

检查Chrome中的“检查元素CSS”以比较并查看在工作和不工作时存在哪些CSS类。 - Srinivas GV

在正常情况下，当我点击文本框时，会添加 .focused 类。但是当它不起作用时，这种情况不会发生。 - Vivek Nuna

“再次来到此页面”是什么意思？使用 repro 分叉 module-zero-core-template。 - aaron

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>

- ismcagdas