javascript - javascriptを介して要素を追加した後、CSSグラデーションがコンテナを埋めない

Question

私は現在、HTML パネルを介してゲーム内で使用され、ゲーム コードで動的に変更されるプレースホルダー ページを作成しています。

現在、ページの検索機能を使用していますが、バックグラウンドで使用されているグラデーションに問題があります。検索結果を動的に入力するために JavaScript を使用しています (後でゲーム コードを介して挿入され、正しいものを表示します)。

検索ボックスが使用された後に JavaScript がフィラー テキストを追加すると (再びプレースホルダー)、グラデーションはボックスの新しい幅を埋めるために端点を動的に変更しません。それは新しい空間で真新しいグラデーションを開始します。ただし、chrome inspect element コンソールを開くと、グラデーションが更新されてボックスが塗りつぶされます (ゲームは webkit のみをサポートしているため、webkit 要素のみを考慮して構築されています)。

chrome inspect element コンソールが javascript のグラデーションに対して行うことをシミュレートできますか?

HTML

<section id="database-search">  
        <form action="javascript:showResults()">
            <input type="text" class="search-bar" placeholder="Search for Item..." checked="checked"></input>
        </form>
        <section id="search-results">
            <span id="search_results"></span>
        </section>
    </section>

CSS

.database-search {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(30%, #373737), color-stop(60%, #373737), color-stop(100%, #1e1e1e));
}

Javascript

function showResults() {
            document.getElementById('search_results').innerHTML = 'No Results Found.';
        }

ありがとう！編集: CSS の間違った部分を投稿しました。更新しました!