Question

我有输入并且专注于我在占位符和文本之前显示omg，但是现在从上到下显示，并且我需要从左到右和最佳使用的转换，并且它应该是从左到右，就像现在是文本一样。有人可以帮我吗？

谢谢。

input[type="text"] {
  width: 100%;
  height: 25px;
  padding: 1rem;
  font-size: 14px;
  border: 1px solid #e6e6e6;
  outline: none;
  transition: all .2s linear;
}
input[type="text"]:focus {
  background: url("https://svgshare.com/i/97k.svg") no-repeat;
  background-size: 27px 27px;
  background-position: 5px center;
  background-color: white;
  padding-left: 35px;
  border-color: #cccccc;
  color: black;
  transform-origin: 50% 50%;
}

<input type="text" placeholder="Text">

Answer 1

您在这里：

input[type="text"] {
  width: 100%;
  height: 25px;
  padding: 1rem;
  font-size: 14px;
  border: 1px solid #e6e6e6;
  outline: none;
  transition: all .2s linear;
  background: url("https://svgshare.com/i/97k.svg") no-repeat;
  background-size: 27px 27px;
  background-position: -35px center;
}
input[type="text"]:focus {
  background-position: 10px center;
  background-color: white;
  padding-left: 45px;
  border-color: #cccccc;
  color: black;
  transform-origin: 50% 50%;
}

<input type="text" placeholder="Text">

焦点内的图标

1 个答案: