I am currently designing a form where the label should be positioned on the top border line of the text box.
[![enter image description here][1]][1]
Here is the code snippet:
<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>
And here is the 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;
}
Everything is working fine except that the input box still has a black solid border even when it's focused. I have set the border to none on focus, but it's not working. How can I remove the border of the input box?