如何调整文本类型输入中的书面文本？
Posted
技术标签:
【中文标题】如何调整文本类型输入中的书面文本？【英文标题】：How can I adjust the written text in text type input? 【发布时间】：2021-10-20 13:05:17 【问题描述】：我正在创建一个打开的搜索框，您单击它就会打开，但是我的文本有问题，这就是它的工作原理：
.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>这里还有一个问题是输入超出了它应该在的区域，请问我该如何解决这个问题！
【问题讨论】：
.search-box input 中的 padding-left: 20px 在第二个 sn-p (Chrome 92) 中按预期工作。
你说的输入超出了它应该在的区域是什么意思？
这个article 会帮助你。
@RobMoll 我的意思是左边的粉红色输入离包含图标的框很远，我希望用户写的文本离输入边缘有点远，不像第二个sn-p那样在最左边，你有解决方案吗？
【参考方案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 在 cmets 中指出这一点。
【讨论】：
虽然是一个很好的答案，但如果输入文本很长，这将导致输入文本的结尾隐藏在搜索图标下。请在下面查看我的答案，该答案也解决了该问题。 @Tim 谢谢你的评论。是的，应该添加正确的填充，但也可以使用边距。 @YacineBenhenni 请在#check:checked ~ .search-box input 中添加38px 的右填充以避免在搜索按钮下滚动较长的搜索文本。详情请查看我的更新。【参考方案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>【讨论】：
感谢您指出这一点。良好的观察力 +1以上是关于如何调整文本类型输入中的书面文本？的主要内容，如果未能解决你的问题，请参考以下文章