文章/答案/技术大牛

发布

社区首页 >问答首页 >如何调整文本类型输入中的书面文本？

问如何调整文本类型输入中的书面文本？
EN

Stack Overflow用户

提问于 2021-08-18 18:08:26

回答 2查看 45关注 0票数 0

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

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

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

html

css

input

padding

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-08-18 18:37:00

使用.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在评论中指出这一点。

票数 0

Stack Overflow用户

发布于 2021-08-18 19:08:22

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68837394

复制

相似问题

问如何调整文本类型输入中的书面文本？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何调整文本类型输入中的书面文本？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何调整文本类型输入中的书面文本？
EN