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

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>

F. Müller · Accepted Answer · 2022-12-27 17:39:56Z

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>

Aniket Raj · Accepted Answer · 2022-12-27 17:35:33Z

1

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

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

answered Dec 27, 2022 at 17:35

Aniket Raj

2,1291 gold badge8 silver badges17 bronze badges

Comments

j08691 · Accepted Answer · 2022-12-27 17:39:52Z

0

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 .

edited Dec 27, 2022 at 17:39

j08691

208k33 gold badges269 silver badges281 bronze badges

answered Dec 27, 2022 at 17:36

SAHIL NADAF

1

1 Comment

ismailperim Over a year ago

Answer not related with the question

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related