CODEWITHSUNDEEP
javascripthtmlcssinputpadding
Yacine Benhenni
Yacine Benhenni

Reputation: 3

How can I adjust the written text in text type input?

I am creating an opening search box, that you click then it opens, but i have a problem with the text, this is how it works :

.search {
  float: left;
  position: relative;
}

.search-box input {
  background: #F5B7B1;
  color: white;
  outline: none;
  border: none;
  height: 40px;
  width: 350px;
  max-width: 0px;
  -webkit-transition: all 0.5s 0s ease;
  -moz-transition: all 0.5s 0s ease;
  -o-transition: all 0.5s 0s ease;
  transition: all 0.5s 0s ease;
}

.search-box label {
  position: absolute;
  height: 30px;
  width: 40px;
  background-color: #E74C3C;
  text-align: center;
  padding-top: 12px
}

.search-box label i {
  cursor: pointer;
  color: white;
}

#check:checked ~ .search-box input{
  max-width: 350px;
}

#check{
  display: none;
}

.search-box input::placeholder{
color: #E5E7E9;
padding-left: 20px
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <!-- Fontawesome CDN Link -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
    />
  </head>
  <div class="search">
    <input id="check" type="checkbox" />
    <div class="search-box">
      <input type="text" placeholder="Type here..." />
      <label for="check">
        <i class="fas fa-search"></i>
      </label>
    </div>
  </div>
</html>

It looks good ,but still there a problem which is that the text that the user write will be at the very left, i don't want it like that, i want it to be like the placeholder, with padding: 20px So i tried to edit the original input :

    .search {
      float: left;
      position: relative;
    }

    .search-box input {
      background: #F5B7B1;
      color: white;
      outline: none;
      border: none;
      height: 40px;
      width: 350px;
      max-width: 0px;
      -webkit-transition: all 0.5s 0s ease;
      -moz-transition: all 0.5s 0s ease;
      -o-transition: all 0.5s 0s ease;
      transition: all 0.5s 0s ease;
      padding-left: 20px
    }

    .search-box label {
      position: absolute;
      height: 30px;
      width: 40px;
      background-color: #E74C3C;
      text-align: center;
      padding-top: 12px
    }

    .search-box label i {
      cursor: pointer;
      color: white;
    }

    #check:checked ~ .search-box input{
      max-width: 350px;
    }

    #check{
      display: none;
    }

    .search-box input::placeholder{
    color: #E5E7E9;
    }
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="UTF-8" />
        <!-- Fontawesome CDN Link -->
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
        />
      </head>
      <div class="search">
        <input id="check" type="checkbox" />
        <div class="search-box">
          <input type="text" placeholder="Type here..." />
          <label for="check">
            <i class="fas fa-search"></i>
          </label>
        </div>
      </div>
    </html>

There is another problem here which is the input is out of the area that it should be in, how can I solve this, please!!

Upvotes: 0

Views: 56

Answers (2)

Ravi K Thapliyal
Ravi K Thapliyal

Reputation: 51711

Use the marging-left css property on .search-box label to place the search button correctly.

Use a negative margin of -20px to close the gap completely, or -18px to let the <input> background show through a little bit as seen in your first example.

.search {
  float: left;
  position: relative;
}

.search-box input {
  background: #F5B7B1;
  color: white;
  outline: none;
  border: none;
  height: 40px;
  width: 350px;
  max-width: 0px;
  -webkit-transition: all 0.5s 0s ease;
  -moz-transition: all 0.5s 0s ease;
  -o-transition: all 0.5s 0s ease;
  transition: all 0.5s 0s ease;
  padding-left: 20px
}

.search-box label {
  position: absolute;
  height: 30px;
  width: 40px;
  background-color: #E74C3C;
  text-align: center;
  padding-top: 12px;
  margin-left: -18px;
}

.search-box label i {
  cursor: pointer;
  color: white;
}

#check:checked ~ .search-box input {
  max-width: 350px;
  padding-right: 38px;
}

#check{
  display: none;
}

.search-box input::placeholder{
  color: #E5E7E9;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
<meta charset="UTF-8" />
<!-- Fontawesome CDN Link -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
  </head>
  <div class="search">
<input id="check" type="checkbox" />
<div class="search-box">
  <input type="text" placeholder="Type here..." />
  <label for="check">
    <i class="fas fa-search"></i>
  </label>
</div>
  </div>
</html>

A right padding of 38px – at least 18px to offset the negative margin + optional 20px to match the left padding for symmetry – should be applied to .search-box input to not let longer search texts go below the search button.

Thanks to @Tim for pointing this out in the comments.

Upvotes: 0

Timur
Timur

Reputation: 2287

Applying right: -18px; to .search-box label and padding-right: 40px; to #check:checked ~ .search-box input will get you what you want:

.search {
      float: left;
      position: relative;
    }

    .search-box input {
      background: #F5B7B1;
      color: white;
      outline: none;
      border: none;
      height: 40px;
      width: 350px;
      max-width: 0px;
      -webkit-transition: all 0.5s 0s ease;
      -moz-transition: all 0.5s 0s ease;
      -o-transition: all 0.5s 0s ease;
      transition: all 0.5s 0s ease;
      padding-left: 20px;
    }

    .search-box label {
      position: absolute;
      height: 30px;
      width: 40px;
      background-color: #E74C3C;
      text-align: center;
      padding-top: 12px;
      right: -18px;
    }

    .search-box label i {
      cursor: pointer;
      color: white;
    }

    #check:checked ~ .search-box input{
      max-width: 350px;
      padding-right: 40px;
    }

    #check{
      display: none;
    }

    .search-box input::placeholder{
    color: #E5E7E9;
    }
<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="UTF-8" />
        <!-- Fontawesome CDN Link -->
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
        />
      </head>
      <div class="search">
        <input id="check" type="checkbox" />
        <div class="search-box">
          <input type="text" placeholder="Type here..." />
          <label for="check">
            <i class="fas fa-search"></i>
          </label>
        </div>
      </div>
    </html>

Upvotes: 1

Related Questions