Adding a clickable icon/button to an input field using a chrome extension - HTML,CSS, JavaScript

Question

I'm trying to write a script that will allow me to insert a button into the text field of a web page through a chrome extension. What I want to do is something similiar to what the chrome extension Last Pass does i.e. insert a button into the login fields of username and password. I have used this solution that I found here with the following code example:

     var forms = document.getElementsByTagName('form');
     for (var i = 0; i < forms.length; i++) {
       var form = forms[i];
       var inputs = form.querySelectorAll("input[type=text]");
       for (var j = 0; j < inputs.length; j++) {
         var input = inputs[j];
         button.className = "inputFieldButton";
         input.parentNode.insertBefore(button, input.nextSibling);        
       }
     }

but the code just appends the button to the end of the input field. Here's my CSS code that I've been using for the button:

    .inputFieldButton{
      display: inline;
      padding-right: 50px
      background-image: url("/images/buttonInputField.png");
      cursor: pointer;
      position:relative;
      background-attachment: scroll;
      background-size: 16px 18px;
      background-position: 98% 50%;
      background-repeat: no-repeat;
    }

This is the result of that code. Is there a solution that lets me insert the button into the field. I'm pretty new to all of this so any help would be very much appreciated.

Also I've changed the classname in the css file now.

Answer 1

This is merely a css issue, and there are many ways to "put the button inside the input field". You'd better learn some css knowledge before that.

One simple approach would be adding margin-left: -50px; to your css file, the pixel size is up to you, and don't forget to modify your code to ensure you button is using the right class ( you just use "inputFieldButton" as class name but in css file it is "inputButton")