Question

我更改了::placeholder伪元素中的一些左边距，并且在输入文本与占位符对齐时遇到了一些麻烦。

问题：在输入文字和占位符文字上，图标的距离必须相同。输入文本将与图标齐平，但占位符位于正确的位置。

问题的演示和我的代码如下：

指向我的小提琴的链接：https://jsfiddle.net/4jh52b18/1/

源代码：

CSS：

   #search-overlay {
  position:absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  .search-overlay__wrapper {
    max-width: 752px;
    margin: 0 auto;
    margin-top: 160px;
  }
  .search-overlay__search-bar {
    width: 720px;
    margin: 0 auto;
    font-size: 35px;
    font-family: sans-serif;
    color: black;
    padding: 20px;
    border: none;
    border-bottom: 1px solid gray;
    background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/28403-200.png") left no-repeat;
    background-size: 20px;
    &::placeholder {
      padding-left: 25px;
    }
    @media (max-width: 980px) {
      width: 100%;
      margin: 0 auto
    }
  }
  .search-overlay__close {
    display: inline;
    vertical-align: middle;
    @media (max-width: 980px;) {
      position: absolute;
      top: 0;
      right: 0;
      padding: 24px;
    }
  }
}

HTML：

<div id="search-overlay">
   <div class="search-overlay__wrapper">
     <input type="text" name="search" placeholder="Search" class="search-overlay__search-bar" value="">
     <a class="search-overlay__close" href="#"> <img src="images/overlay-close.png" alt=""> </a>
   </div>
 </div>

在live jsfiddle示例中，当需要在同一位置对齐时，您会看到输入文本与占位符不对齐。能够做到这一点的属性是什么？我尝试直接在输入上添加一个padding-left但是没有按预期工作。

Answer 1

在您的SCSS（第23-25行）中，修改/删除以下内容：

&::placeholder {
  padding-left: 25px;
}

它不起作用的原因是因为SCSS中的&替换了当前的选择器。因此&::placeholder转换为：

#search-overlay .search-overlay__search-bar::placeholder {...}

最有可能的是，你使用的是较弱的选择器而且它不适用。

将占位符与<input />中的输入对齐

1 个答案: