如何在输入中添加三角形[type ='text']

Question

我想在input type='text'HTML元素的右上角添加一个小三角形,就像Excel用来表示注释一样.

这个问题的答案是:

如何在表格单元格中添加三角形

显示了如何为表格单元格执行此操作.我天真地将"note"css类应用于我的输入元素,但它不起作用.有关如何实现这一目标的任何建议？

Answer 1

伪元素不能被使用input的.您可以使用链接帖子(此处)中描述的相同CSS,但您必须将该类应用于祖先.

.note {
    position: relative;
    display: inline-block;
}
.note:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0; 
    height: 0; 
    display: block;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-top: 20px solid #f00;
}

<div class="note">
  <input type="text">
</div>