Home > database >  How to fix my input overlapping my entered text?
How to fix my input overlapping my entered text?

Time:09-23

My input overlapping text on top, for 1 or 2 pixels. Using SCSS with React.JS

My input here

.find-input {
  color: white;
  width: 100%;
  box-sizing: border-box;
  background-color: #262B36;
  padding: 13px 20px;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  border: none;
  border-radius: 4px;
}

.find-input:focus {
  outline: 1px solid blue;
}
<div >
  <input  />
</div>

CodePudding user response:

Try increasing height or reducing top/bottom padding.

Seeing your HTML would help...

CodePudding user response:

I figure it out, i need to set my line-height same as my input height, idk why this happening, but increasing line-height works for me, thanks for your answers.

  • Related