CODEWITHSUNDEEP
javascripthtml
user1431993
user1431993

Reputation:

Adding Font color to Onfocus event in Search Box

How to add the color and font of the default value in my search box .

<input type="text" name="q" value="Enter your keywords here"    
onfocus="if (this.value == 'Enter your keywords here') {this.value = '';}" onblur="if (this.value   == '') {this.value = 'Enter your keywords here';}"
onwebkitspeechchange = "this.value = this.value.replace('Enter your keywords here','')";
x-webkit-speech style="left:9px;top:4px;position:relative;background-color:#fafafa;border:1px     solid;color:#333;font-size:1.4em;width:400px;height:28px"; />

Upvotes: 1

Views: 2021

Answers (2)

Ballu Rocks
Ballu Rocks

Reputation: 1226

change the color in style ... 

<input type="text" name="q" value="Enter your keywords here"    
onfocus="if (this.value == 'Enter your keywords here') {this.value = '';}" onblur="if (this.value   == '') {this.value = 'Enter your keywords here';}"
onwebkitspeechchange = "this.value = this.value.replace('Enter your keywords here','')";
x-webkit-speech style="left:9px;top:4px;position:relative;background-color:#fafafa;border:1px solid     #555;color:#aaa;font-size:1.4em;width:400px;height:28px"; />

Upvotes: 0

Vishal
Vishal

Reputation: 2060

You can set the default style of the input box and then change the color on onfocus and onblur event as follows:

<input type="text" name="q" value="Enter your keywords here"    
    onfocus="if (this.value == 'Enter your keywords here') {
        this.value = ''; 
        this.style.color = '#000';
    }" 
    onblur="if (this.value == '') {
        this.value = 'Enter your keywords here'; 
        this.style.color = '#CCC';
    }"
    onwebkitspeechchange = "this.value = this.value.replace('Enter your keywords here','')";
    x-webkit-speech 
    style="left:9px;top:4px;position:relative;background-color:#fafafa;border:1px solid; color:#CCC;font-size:1.4em;width:400px;height:28px"; 
/>

And you should definitely consider putting this event code in a separate script to make your code look cleaner.

You can also have a look at this fiddle for a little cleaner code. http://jsfiddle.net/MXpSw/

Upvotes: 3

Related Questions