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

December 27, 2022

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>

>Solution :

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>