クロム拡張を使用して入力フィールドにクリック可能なアイコン/ボタンを追加する - HTML、CSS、JavaScript

Question

クロムを使用してウェブページのテキストフィールドにボタンを挿入するスクリプトを作成しようとしています拡張。私がやりたいことは、クロム拡張のLast Passと同じものです。すなわちinsert a button into the login fields of username and passwordです。私は、私は次のコード例でhereを発見したこのソリューションを使用している：

 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);   
     } 
    } 

をしかしコードだけで、入力フィールドの最後にボタンを追加します。ここで私はボタンのために使ってきた私のCSSのコードは次のとおりです。

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

これは、そのコードのresultです。フィールドにボタンを挿入できるソリューションはありますか？私はこのすべてにかなり新しいので、どんな助けも非常に高く評価されるでしょう。

また、CSSファイルのクラス名を変更しました。

Answer 1

これは単なるCSSの問題であり、「ボタンを入力フィールドの内側に置く」方法はたくさんあります。あなたはその前にいくつかのCSSの知識を学ぶ方が良いでしょう。

簡単なアプローチの1つは、CSSファイルにmargin-left: -50px;を追加することです。ピクセルサイズはあなた次第です。ボタンが適切なクラスを使用するようにコードを修正することを忘れないでください（単に "inputFieldButton"をクラス名ですが、CSSファイルでは "inputButton"です）