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

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 >
  <div >
    <input type="text"  placeholder="Email or phone number">
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <input type="text"  placeholder="Email or phone number">
  </div>
</div>

CodePudding user response：

you can use outline to style outline of any input tags.

input:focus {
  outline: 1px solid tomato;
}

CodePudding user response：

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 .