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

Question

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

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

#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! */
}

Answer 1

您仍然可以使用 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-box is supported in IE8+ 以及现代网络浏览器。

Answer 2

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

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

示例 1（使用 box-sizing:border-box 声明）

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

示例 2（使用 text-align:center 声明）

#searchfield {
      text-align:center;
}

Answer 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

现场演示

Answer 4

这可以为您解决问题。它解决了我遇到的问题。在 firefox 和 chrome

上试过

.random-class-name{
text-indent: 10px;
}

输入中的文本也缩进了。

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

Padding for placeholder without changing the size of input

css

padding

placeholder

search-form