如何调整文本输入法中的文字？

Question

我正在创建一个打开的搜索框，点击它就会打开，但我对文本有疑问，它是这样工作的:

.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>

看起来不错，但仍然存在一个问题，就是用户写的文本会在最左边，我不想那样，我希望它像占位符一样，有填充: 20px 所以我尝试编辑原始输入：

    .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>

这里还有一个问题就是输入超出了它应该在的区域，请问我该如何解决！！

Answer 1

在 .search-box label 上使用 marging-left css 属性正确放置搜索按钮。

使用 -20px 的负边距完全缩小差距，或 -18px 让 <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;
  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>

38px 的右填充 – 至少 18px 以抵消负边距 + 可选 20px 以匹配左填充以实现对称 – 应应用于 .search-box input 不要让较长的搜索文本出现在搜索按钮下方。

感谢@Tim 在评论中指出这一点。

Answer 2

将 right: -18px; 应用到 .search-box label 并将 padding-right: 40px; 应用到 #check:checked ~ .search-box 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;
      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>

如何调整文本输入法中的文字？

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

html

javascript

css

input

padding