How to hide text input box while writing in it Using CSS - html

Question

I want to style the input box so I have created an outside div element that contains my input element. When I click on the input element to write inside of it the border for it shows which I don't want since it ruins the look for the element I have created.
How do I make it so that the border for the input element is hidden when I click on the input element?
.loginbox {
width: 300px;
height: 260px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
box-sizing: border-box;
padding: 10px;
}
.input-text {
width: 95%;
height: 95%;
border: none;
font-size: 90%;
display: block;
}
.input-text::placeholder {
color: #b7b7b7;
font-family: SFProDisplay-Regular, Helvetica, Arial, sans-serif;
}
.input-text-border {
border: 1px solid #afafaf;
padding: 5px;
width: 90%;
height: 10%;
background-color: #ffffff;
border-radius: 6px;
}
<div class="loginbox">
<div class="input-text-border">
<input type="text" class="input-text" placeholder="Email or phone number">
</div>
</div>

Answer 1

It is a browser default and an accessibility feature. Make sure you add something visually equivalent to make it clear for the user.
You can use :focus and :focus-within to target this behavior. This "border" is an outline so you can override it.
.loginbox {
width: 300px;
height: 260px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
box-sizing: border-box;
padding: 10px;
}
.input-text {
width: 95%;
height: 95%;
border: none;
font-size: 90%;
display: block;
}
.input-text:focus {
outline: none;
}
.input-text::placeholder {
color: #b7b7b7;
font-family: SFProDisplay-Regular, Helvetica, Arial, sans-serif;
}
.input-text-border {
border: 1px solid #afafaf;
padding: 5px;
width: 90%;
height: 10%;
background-color: #ffffff;
border-radius: 6px;
}
<div class="loginbox">
<div class="input-text-border">
<input type="text" class="input-text" placeholder="Email or phone number">
</div>
</div>

Answer 2

you can use outline to style outline of any input tags.
input:focus {
outline: 1px solid tomato;
}

Answer 3

We need to use the HTML type for hiding the input field. Using this attribute, the input field will no longer be visible on the page.
By this tag we can hide input field in the page .