CSS实现图片上方全屏响应式搜索框宽度问题排查

你的搜索框无法呈现100%宽度的核心原因是绝对定位的.centered容器没有设置宽度——它的宽度默认由内部表单内容撑开，所以即便给input设置了width:100%，也只是相对于这个窄容器的宽度，无法铺满全屏。

要实现响应式的全屏搜索框，只需调整以下几点：

• 给.centered设置width: 100%，让它和父容器.container同宽
• 给表单添加margin: 0，清除浏览器默认的表单外边距
• 给input添加box-sizing: border-box，确保padding和border不会超出设定宽度

修改后的完整代码如下：

CSS #

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; /* 新增：让容器占满父元素宽度 */
}

input[type=text] {
  height: 25px;
  border: 1px solid #FFFFFF;
  text-align: right;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 3px;
  background-color: transparent;
  width: 100%;
  box-sizing: border-box; /* 新增：确保padding/border不影响宽度计算 */
}

textarea:focus,
input:focus {
  color: #FFFFFF;
}

input,
select,
textarea {
  color: #FFFFFF;
}

form {
  margin: 0; /* 新增：清除表单默认外边距 */
}

HTML #

<div class="container">
  <img src="ban.png" style="width:100%;">
  <div class="centered">
    <form method="get" action="https://www.google.com/search" target="_blank">
      <input type="text" value="Find more" name="q" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
      <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
      <input type="hidden" name="sitesearch" value="mydomain.com" />
    </form>
  </div>
</div>

修改完成后，搜索框会随窗口尺寸变化自动调整宽度，始终铺满全屏，同时保持在图片上方居中的位置。

内容的提问来源于stack exchange，提问作者shaon84