css - 如何在输入类型文本的左侧创建气泡或信息框

Question

我正在尝试将密码表放在三角形提示的信息框中的左侧..

.container {
    width: 50%;
}
.infobox {
    position: absolute;
}

<div class="container">
    <input type ="text" placeholder="password">
    <div class="infobox">
        Password meter<br>
        Uppercase<br>
        Special Character<br>
    </div>
</div>

标签： css

Answer 1

您与css selector&合作过css pseudo

.container {
    width: 50%;
  position: relative;
  padding-left:240px;
}
.infobox {
    position: absolute;
  left: 0;
top: 0;
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  background:#fff;
  z-index: 1;
  padding: 10px;
}
.infobox:after {
  content: " ";
  position: absolute;
  right: -15px;
  top: -1px;
  border-top: 15px solid transparent;
  border-right: none;
  border-left: 15px solid black;
  border-bottom: 15px solid transparent;
}

<div class="container">
    <input type ="text" placeholder="password">
    <div class="infobox">
      <div class="arrow-right"></div>
        Password meter<br>
        Uppercase<br>
        Special Character<br>
    </div>
</div>