Question

我正在尝试在Google自动填充输入中使用字体真棒地图标记。我的目标是将地图标记放在占位符文本的左侧，能够仅为地图标记添加颜色，并使其即使在用户键入时也始终存在。到目前为止，我已经尝试过：

<span class="google-address-bar"><input #pacinput id="pac-input" class="form-control" type="text" placeholder=" Enter Your Street Address"> </span>

with：

#pac-input { font-family: Fira-Sans, FontAwesome, Serif; background-color: #fff; width: 400px; height: 45px; font-size: 15px; font-weight: 300; text-overflow: ellipsis; }

但是使用这个解决方案我无法为Map Marker添加颜色，因为它是占位符，一旦输入变脏，它就会消失。有没有人完成这个？

Answer 1

使用<label>或<i>作为Font Awseome部分，然后在input上方放置图标。然后，只需要调整填充。

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.google-address-bar {
  position: relative;
}
.google-address-bar i.fa {
  color: red;
  position: absolute;
  height: 45px;
  line-height: 45px;
  padding-left: .5em;
}
#pac-input {
  font-family: Fira-Sans, Serif;
  background-color: #fff;
  width: 400px;
  height: 45px;
  font-size: 15px;
  font-weight: 300;
  padding-left: 1.5em;
  text-overflow: ellipsis;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="google-address-bar"><i class="fa fa-map-marker"></i>
  <input #pacinput id="pac-input" class="form-control" type="text" placeholder=" Enter Your Street Address">
</span>

在Google自动填充Pac-Input中使用Font Awesome

1 个答案: