CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 4944

Changing the color of the text and cursor in input box

When a user clicks in the box below, the cursor and typed text are black. How could I make them the color of #DE2A00 ? 

<div class="usernameformfield"><input tabindex="1" accesskey="u" name="username" type="text" maxlength="35" id="username" /></div>

Upvotes: 6

Views: 28283

Answers (5)

Dean Marshall
Dean Marshall

Reputation: 1825

Just use CSS:

#username{color:#000;} /* black when not with focus */
#username:focus{color:#de2a00;} /* green when input has focus - only affects this specific input */

Upvotes: 3

Adithya Surampudi
Adithya Surampudi

Reputation: 4454

I am assuming you need the text inside the text box in that color, if so do this

 <input...type="text"...style="color: #DE2A00;"/></div>

Upvotes: 0

John Riselvato
John Riselvato

Reputation: 12904

A little shorter one:

input:focus { color: #DE2A00  }

Upvotes: 0

newshorts
newshorts

Reputation: 1056

<style>
#username {
    color: #DE2A00;
}
</style>

Or you could have the color change when a user clicks on the field like so:

<script type=text/javascript src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script type=text/javascript>
    $(document).ready(function() {
        $('#username').click(function(){
            $(this).css({'color': '#DE2A00'});
        });
    });
</script>

It depends on what you want, I would check out this reference to start playing around with some things:

w3schools

and

css-tricks

Upvotes: 2

Lenar Hoyt
Lenar Hoyt

Reputation: 6159

You could these little JavaScripts:

onfocus="this.style.background = '#DE2A00'" onblur="this.style.background = 'white'"

Upvotes: 0

Related Questions