javascript - CSS：透明图像叠加输入字段

Question

我一直在尝试将这个透明徽标放在输入字段上，但我无法将它放在左侧。谁能指导我如何实现这一目标？提前致谢 ：）

<div className={classes.formClass}>
        <h3 className={classes.active}>Sign Up</h3>
        <h3 className={classes.notActive} onClick={this.switchAuthModeHandler}>
          Log In
        </h3>
        <div>
          {/* <img src={require("../../assests/[e-mail]")} alt="" /> */} [the image logo]
          <input
            type="text"
            placeholder="Username"
            name="username"
            onChange={(event) => this.inputChangedHandler(event, "username")}
          />
        </div>
</div>

CSS: 
.formClass {
  display: block;
  position: relative !important;
  margin-left: auto;
  margin-right: auto;
}

.formClass img {
  position: absolute;
  margin-left: 50%;
  margin-right: 30%;
  top: 12px;
  height: 24px;
  width: 24px;
  left: 20px;
  right: 10px;
}

.formClass div input {
  height: 52px;
  width: 360px;
  border-radius: 0px;
  opacity: 30%;

  margin-bottom: 12px;
}

它应该 如何 它是如何

标签： javascripthtmlcssreactjscss-selectors

Answer 1

添加position:absolute到您的图像类。它将根据您的需要将图像定位在您的输入中。