如何使用CSS或JS使某些文本輸入在輸入中顯示幫助圖標？

Question

我不太喜歡外部幫助圖標，因為它們阻礙了一致的布局，並且更喜歡將幫助圖標放在標有例如with-help類的輸入中。 他們看起來像這樣：

我也更希望“圖標”是SVG形狀。 CSS可能實現此功能，還是我需要JS將SVG形狀添加到所有此類輸入中？

Answer 1

看下面的代碼。 更改border-width: 0 30px 30px 0;的值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>