在不改变输入大小的情况下填充占位符答案

【问题标题】：Padding for placeholder without changing the size of input在不改变输入大小的情况下填充占位符
【发布时间】：2017-03-19 02:06:18
【问题描述】：

我做自适应搜索表单。搜索字段应取父 div 的 100% 宽度（父 div 的宽度会根据设备的分辨率而变化）。 “搜索”按钮应始终位于字段的右侧，不要向下移动。

working version.

但是有一个问题：文本“立即搜索”（占位符）太靠近字段的边缘，我无法将其移动到右侧。在其他示例中，它按字段填充的设置值移动。但是，如果我更改填充 - 字段本身会向左移动，但我只需要移动文本！

#searchfield {
   padding: 10px 0 13px 0; /* Try to change the left padding here! All field shifts to the left! But I need only shift the placeholder text to right! */
}

【问题讨论】：

标签： css padding placeholder search-form

【解决方案1】：

尝试为 id searchfield 添加 text-align:center 或添加 box-sizing:border-box; 声明。

尝试以下任何一个示例，它将按您的预期将占位符向右移动，这些也将支持 Ie 较低版本。

Example1（使用 box-sizing:border-box 声明）

#searchfield {
     padding: 10px 0 13px 0px;
     box-sizing: border-box;
}

Example2（使用 text-align:center 声明）

#searchfield {
      text-align:center;
}

【讨论】：

【解决方案2】：

您仍然可以使用padding 来移动占位符文本，具有box-sizing: border-box; 声明的风格。

box-sizing: border-box; 使用户代理包含padding/border 到框的width/height。

#searchfield {
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px 0 13px 10px;
  box-sizing: border-box;
  /* other declarations... */
}

由于简洁而省略了供应商前缀。

#sidebar {
  width: 20%;
  background: #ccc;
  height: 300px;
  padding: 20px;
}
#search {
  width: 100%;
  height: 50px;
  position: relative;}
#searchfield {
  width: 100%;
  border: 1px solid #ccc;
  margin: 0;
  padding: 12px 0 13px 10px;
  box-sizing: border-box;
  position: absolute;
  right: 0;
}
#searchsubmit {
  width: 60px;
  height: 41px;
  background: red 0 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  right: 0;
  position: absolute;
}

<html>
 <body>
  <div id="sidebar">
    <div id="search">
      <form id="searchform" method="get" action="/index.php" _lpchecked="1">
      <input type="text" name="s" id="searchfield" placeholder="Search now">
      <input type="submit" id="searchsubmit" value="Search">
      </form>
     </div>
   </div>
 </body>
</html>

值得一提的是border-boxis supported in IE8+以及现代网络浏览器。

【讨论】：

谢谢你这很容易:)
从来不知道用这个，现在它可以为我节省很多时间。谢谢！

【解决方案3】：

无需使用绝对位置。试试这个代码：

<html>
 <body>
  <div id="sidebar">
    <div id="search">
      <form id="searchform" method="get" action="/index.php" _lpchecked="1">
      <input type="text" name="s" id="searchfield" placeholder="Search now">
      <input type="submit" id="searchsubmit" value="Search">
      </form>
     </div>
   </div>
 </body>
</html>


#sidebar {
  width: 20%;
  background: #ccc;
  height: 300px;
  padding: 20px;
}
#search {
  width: 100%;
  height: 50px;
  position: relative;}
#searchfield {
  width: calc(100% - 60px);
  border: 1px solid #ccc;
  margin: 0;
  padding: 10px 0 13px 20px; /* Try to change the left padding here! All field shifts to the left! But I need only shift the placeholder text to right! 
  position: absolute;*/
  right: 0;
  float:left;
  box-sizing:border-box;
}
#searchsubmit {
  width: 60px;
  height: 41px;
  background: red 0 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  right: 0; 
  float:left;
  box-sizing:border-box;
}

code pen上的现场演示

【讨论】：