How to change font color in an input

Question

I want to make a user-script that changes the text color inside the google search bar:

// ==UserScript==
// @name        color change
// @namespace   google
// @include     http://*.google.com
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @version     1
// ==/UserScript==


var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{
    if(inputs[i].type == "text")
    {
        inputs[i].text.css({'color' : 'red'});

    }
}

I pasted the following code to userscripts.org and installed it to chrome, when I visited http://google.com and started typing the text it appears black as usual where it should appear red. What did I do wrong?

Answer 1

inputs[i].style.color = 'red';

userscripts are not any different than actual script in the page, you could search "change text color with js" and find this result:

set html text color and size using javascript

Answer 2

Since you have jquery available, this seems to be a viable and possibly cleaner solution:

$('input').css('color', 'red');

The reason your example doesn't work is because it is attempting to use a jQuery method on a vanilla JavaScript object. You can't mix the two. If you want a purely vanilla solution, you need to use the recommendation by @Quad. To use jQuery, you would get rid of most of your code and replace with what I have shown above.