javascript - 如何使用 CSS 或 JS 让一些文本输入在输入中显示帮助图标？

Question

我不太喜欢外部帮助图标，因为它们阻碍了一致的布局，并且更愿意将帮助图标放在标有例如一个 with-help 类。它们看起来像这样:

我也更希望“图标”是 SVG 形状。使用 CSS 是否可行，或者我是否需要 JS 将 SVG 形状添加到所有此类输入？

Answer 1

看看下面的代码。改变border-width: 0 30px 30px 0;的值来改变三 Angular 形的大小，改变text-indent:16px;来对齐问号。

.help{
  position:relative;
  display:inline-block;
}
input{
  padding:10px;
}
.help a:before{
  content: "?";
  position:absolute;
  top:0;
  right:0;
  display:block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #007bff transparent transparent;
  text-align:right;
  text-indent:16px;
  color:#fff;
}

<div class="help">
  <input type="text" >
  <a href=""></a>
</div>