我正在制作一個表單，其標簽應位于文本框的頂部邊框線上。
[![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;
}
可以使用輸入框焦點。它有黑色實心邊框。.當它獲得焦點時，我已經將邊框設定為無，但它不起作用，我怎樣才能將輸入框的邊框設定為無。
uj5u.com熱心網友回復：
該代碼將起作用。
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/432841.html
下一篇：將表格單元格中的容器拉伸到全高