search

Home  >  Q&A  >  body text

How do I fix my input overlapping the entered text?

My input has 1 or 2 pixels of text overlapped on top. Using SCSS with React.JS

.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 class="main">
  <input class="find-input" />
</div>

P粉141035089P粉141035089379 days ago485

reply all(1)I'll reply

  • P粉002546490

    P粉0025464902024-01-30 00:06:51

    Try increasing the height or reducing the top/bottom padding.

    Looking at your HTML will help...

    reply
    0
  • Cancelreply