搜索框占位符以我的方式向左对齐

Question

目前我的代码工作正常并且也与 left 对齐，但我对当前的对齐方式不满意。

.text-box-container {
  overflow: hidden;
}

.text-box-container>input[type="search"] {
  width: 100% !important;
  text-align: left !important;
}

<div class="text-box-container">
  <input type="search">
</div>

我想把这段文字放在最左边。我的意思是，在某些位置。我将把它定义为在某个位置左侧。

我该怎么做？

Answer 1

您可以使用 text-indent 属性.

input::placeholder {
  text-indent: -15px;
}

<input type="text" placeholder="enter text"/>

Answer 2

您可以尝试使用 .abc 元素：

.abc::placeholder {
   width: 100% !important;
   text-align: left !important;
   float:left;
   left:0;
}