How can I use CSS or JS to make some text inputs display a help icon inside the input?

Question

I don't much like external help icons, as they hinder consistent layout, and would much prefer to place the help icon inside inputs marked with eg a with-help class. They would look something like this:

I would also much prefer that the 'icon' be an SVG shape. Is that possible with CSS, or would I need JS to add the SVG shape to all such inputs?

Answer 1

Have a look at below code. change the value of border-width: 0 30px 30px 0; to change the size of triangle, and change text-indent:16px; to align question mark.

 .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>