输入文本框在获得焦点时有边框

Question

我正在制作一个表格，它的标签应该在文本框的顶部边框线上。

[![enter image description here][1]][1]

代码是：

   <div class="container">
    <div class="row">
        <div class="page-account-box">
            <div class="col-md-9 mx-auto">
                <div class="account-box">
                    <div class="picture_account">
                        <img src="~/images/d2.jpg" class="imgFormat " />
                    </div>

                    <div class="account-box-content mt-4">
                        <h4>Register</h4>
                        <form method="post" class="form-account">
                            <div class="row pt-3 ">
                                <div class="col-6">
                                    <div class="newinput">
                                        <label>Name </label>
                                        <div class="col-12 ">
                                            <input type="text" id="FirstName" class="w-100">
                                        </div>

                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="newinput">
                                        <label>Lastname </label>
                                        <div class="col-12">
                                            <input type="text" id="LastName" class="w-100">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row pt-3 ">
                                <div class="col-12">
                                    <div class="newinput">
                                        <label>Email </label>
                                        <div class="col-12">
                                            <input type="email" id="Email" class="w-100">
                                        </div>
                                    </div >
                                </div>
                            </div>                                                             
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
   </div>

这是 Css:

   .page-account-box {
   width: 100%;
    margin-top: 70px;
  }

.page-account-box  .account-box {
    width: 100%;
    height: auto;
    padding: 0;
    border: 1px solid #e2efef;
    -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
    box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
    position: relative;
    margin: 70px auto 30px;
    display: flex;
    background: #fff;
    border-radius: 20px;
   }
   .page-account-box .account-box .account-box-content {
        min-height: 50%;
        padding: 15px 20px;
        border-radius: 20px;
        border: 2px solid black;
        width: 100%;
    }
 .form-account {
padding:0px;
 margin:0px;
 }
  .page-account-box .account-box .account-box-content .form-account .newinput {
  padding: 5px;
  border: 2px solid;
  margin: 0px;
 height:40px;
}
   .page-account-box .account-box .account-box-content .form-account .newinput input {
border: none;

  }

    .page-account-box .account-box .account-box-content .form-account .newinput input:focus {
        background-color: red;           
        border: none;
        border-color:white;
    }

 .page-account-box .account-box .account-box-content .form-account .newinput label {
  position: absolute;
  top: -13px;
  right: 25px;
  background-color: white;
 }

输入框焦点可以使用。它有黑色实心边框。 .我把焦点设置成none,但是不行,请问如何把输入框的边框设置成none.

Answer 1

代码将起作用。

.page-account-box {
  width: 100%;
  margin-top: 70px;
}

.page-account-box .account-box {
  width: 100%;
  height: auto;
  padding: 0;
  border: 1px solid #e2efef;
  -webkit-box-shadow: 0 12px 12px 0 hsla(0, 0%, 70.6%, .11);
  box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
  position: relative;
  margin: 70px auto 30px;
  display: flex;
  background: #fff;
  border-radius: 20px;
}

.page-account-box .account-box .account-box-content {
  min-height: 50%;
  padding: 15px 20px;
  border-radius: 20px;
  border: 2px solid black;
  width: 100%;
}

.form-account {
  padding: 0px;
  margin: 0px;
}

.page-account-box .account-box .account-box-content .form-account .newinput {
  padding: 5px;
  border: 2px solid;
  margin: 0px;
  height: 40px;
}

.page-account-box .account-box .account-box-content .form-account .newinput input {
  border: none;
}

.page-account-box .account-box .account-box-content .form-account .newinput input:focus {
  background-color: red;
  border: none;
  border-color: white;
}

.page-account-box .account-box .account-box-content .form-account .newinput label {
  position: absolute;
  top: -13px;
  right: 25px;
  background-color: white;
}

textarea:focus,
input:focus {
  outline: none;
}

<div class="container">
  <div class="row">
    <div class="page-account-box">
      <div class="col-md-9 mx-auto">
        <div class="account-box">
          <div class="picture_account">
            <img src="~/images/d2.jpg" class="imgFormat " />
          </div>

          <div class="account-box-content mt-4">
            <h4>Register</h4>
            <form method="post" class="form-account">
              <div class="row pt-3 ">
                <div class="col-6">
                  <div class="newinput">
                    <label>Name </label>
                    <div class="col-12 ">
                      <input type="text" id="FirstName" class="w-100">
                    </div>

                  </div>
                </div>
                <div class="col-6">
                  <div class="newinput">
                    <label>Lastname </label>
                    <div class="col-12">
                      <input type="text" id="LastName" class="w-100">
                    </div>
                  </div>
                </div>
              </div>

              <div class="row pt-3 ">
                <div class="col-12">
                  <div class="newinput">
                    <label>Email </label>
                    <div class="col-12">
                      <input type="email" id="Email" class="w-100">
                    </div>
                  </div>
                </div>

Answer 2

你必须在聚焦时将轮廓设置为 0

看起来像这样

input:focus {
   outline: 0;
}

输入文本框在获得焦点时有边框

input textbox has border when it gets focus

html

css

bootstrap-4