How can I stylize this input field?

I'm using the following javascript:

<input class="search_box" name="search_words" type="text"  value="short name / description" onfocus="if (this.value == 'short name / description') {this.value = '';}" onblur="if (this.value == '') {this.value='short name / description';}"/>

It works great as you can see from these images. First you've got the "starting point" where my "short name / description" text is in grey.

screenshot
As far as the overall functionality of the script, again, it works just like I want it to. If a user clicks the field, the placeholder goes away. If they enter any text, that text remains. If they click outside of the text box and don't change anything, the "short name / description" placeholder snaps back into place.

Perfect!

My challenge is I want the color of the text that my user enters into the field be black. I have the "focus" stylized in CSS so when my user is documenting something in the field, it looks like this:

another screenshot
But after they've entered their text, it goes back to the grey color as you can see here:

yet another screenshot
How can I ensure that any text my user has entered will remain black rather than going back to grey?

Just for grins, here's my CSS:

input.search_box:focus {
color:#000000;
}

 input.search_box {
width:225px;
height:27px;
margin-top:0px;
border:1px solid #cccccc;
color:#cccccc;
 }

Thanks!
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
Try:

input.search_box {
width:225px;
height:27px;
margin-top:0px;
border:1px solid #cccccc;
color:#000000 !important;
 }
Bruce GustPHP DeveloperAuthor Commented:
When I do that, the "short name / description" placeholder becomes black and I need that to remain grey.

What else could I try?
hieloCommented:
OK, then put an onblur event listener on the <input>:
input.search_box:focus {
color:#000000;
}

 input.search_box {
width:225px;
height:27px;
margin-top:0px; 
border:1px solid #cccccc;
color:#cccccc;
 }

<input type="text" value="description" onblur="this.style.color = (this.value==this.defaultValue) ? '#cccccc' : '#000000'; "/>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Bruce GustPHP DeveloperAuthor Commented:
hielo!

That worked. Can you tell me why it worked?

I see how you specified the color:

this.style.color

...but then I don't follow how you coded the remaining part of your syntax.

Thanks!
hieloCommented:
>> but then I don't follow how you coded the remaining part of your syntax.
When you serve the following initial markup/code from the server:
<input type="text" id="searchBox" value="Enter Description"/>

Open in new window


There is a "hidden" property that is accessible on the browser side.  That property is "defaultValue", which is exactly that -- the initial value of the element at the time the document was served.  So if you click in the textbox and change its value to "hi", its "value" is now "hi", but its defaultValue (in this particular example) remains "Enter Description".

Ultimately, what I am doing is using javscript's ternary operator:
var x = 3==4 ? 'N':'Y';

Open in new window


which is equivalent to an if-else clause:
if( 3==4 )
  x='N';
else
  x='Y';

Open in new window

I used color codes instead of 'N' and 'Y' of course.

Regards,
hielo
Bruce GustPHP DeveloperAuthor Commented:
Excellent!

Thank you!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.