如何使用 CSS 或 JS 使某些文本输入在输入内显示帮助图标？答案

【问题标题】：How can I use CSS or JS to make some text inputs display a help icon inside the input?如何使用 CSS 或 JS 使某些文本输入在输入内显示帮助图标？
【发布时间】：2017-08-08 13:24:54
【问题描述】：

我不太喜欢外部帮助图标，因为它们妨碍了一致的布局，并且更愿意将帮助图标放置在标有 e.g. 的输入中。 with-help 类。它们看起来像这样：

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

【问题讨论】：

帮助图标是否需要可点击？还是只是看看
它必须是可点击的。否则我看不出它有多大用处。但几乎任何东西都可以点击。
那么使用 JUST css 将无济于事。您很可能需要在该框中附加一个额外的 div 并在其上添加一个 onclick 事件处理程序
我知道css可能对onclick没有帮助，但是一个简单的jQuery 1-liner可以使图像可点击，无需任何额外的div，我还要看看Bootstrap的data-toggle属性。

标签： javascript html css svg icons

【解决方案1】：

看看下面的代码。修改border-width: 0 30px 30px 0;的值来改变三角形的大小，修改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>

【讨论】：

非常巧妙地使用了border-width。谢谢！