1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do I grey out the default text of a text box?

Discussion in 'CSS' started by kinkarso, Oct 3, 2011.

  1. #1
    Hey there,

    I have a text box that shows some default text. On mouseover, the text would disappear and the user would be able to type in there regularly:
    http://snpr.cm/bnGelO.jpg
    SEMrush
    However, I'd like to apply some CSS styling to the default text so that it looks like instructional text and nothing else. Do you have any ideas on how to accomplish this?

    1) Default text would be grey colored
    2) Onmouseover the text would disappear, and when the user starts typing it would be just regular black.

    Here's the current code for this:

    <textarea class="textarea" onblur="if(this.value=='') this.value='Question or topic you need help with (in one sentence)...';" onfocus="if(this.value=='Question or topic you need help with (in one sentence)...') this.value='';" id="question" name="question">Question or topic you need help with (in one sentence)...</textarea>
    HTML:
    Thanks!
    Donny
     
    kinkarso, Oct 3, 2011 IP
    SEMrush
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You are looking for something called a placeholder. You could try the HTML5 placeholder attribute, or stick with Javascript (which will work in more browsers).

    To make it look greyed out, you could also set the textarea to "disabled" until the user mouses over it (you set this in Javascript, so users without Javascript can type in there and simply don't get a placeholder). Or, you could use CSS styling to grey it by default and then change colours on :focus... but still would need Javascript there as well, to keep it looking "typable" once the placeholder is gone and the answer is in place.

    Don't let placeholders take place of real labels! If you only want the placeholder, then have a label and let Javascript hide the label when it loads. People without JS get a regular text area and a label. People with Javascript only get the placeholder. Graceful degradation.

    I've used something like this:
    
    example HTML
    ...
        <input type="text" name="search" title="search our site" value="" aria-required="true">
        <input type="submit" value="Search"> 
    
    Code (markup):
    then
    
    <script type="text/javascript">
        var searchLabel = document.forms['formSearch']['search'];
        searchLabel.value = 'type your keywords in'; //so onLoad, the value is added with Javascript
    //here we could also make it disabled...
        searchLabel.disabled='true'; //actually I haven't tested this, not sure if setting to true works right
        searchLabel.onfocus = function() {
            searchLabel.disabled='false'; //or whatever works
            searchLabel.select(); //highlights on focus, which is nice because you don't have to worry much about onblur
            //or this.value=''; removes value on focus
        }
    </script>
    
    Code (markup):
    you could add an onblur in there too...
    
        searchLabel.onblur = function() {
            if(searchLabel.value='') {
                searchLabel.value='type your keywords in';
                //also set back to disabled...
            }
        }
    
    Code (markup):
    *edit actually it's occurred to me that disabled inputs may not be able to receive focus in all browsers. If they can, then fine but if the next Tab skips it, you'll need to use CSS styling. In which case, I'd have classes pre-written in your CSS and just have Javascript add or remove the classes to add or remove styling. Easiest.
     
    Last edited: Oct 4, 2011
    Stomme poes, Oct 4, 2011 IP
  3. you-me

    you-me Peon

    Messages:
    67
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    use jquery for all your desired activity, as Stomme poes shows you a example.
     
    you-me, Oct 4, 2011 IP
  4. flithost

    flithost Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Don't let placeholders take place of real labels! If you only want the placeholder, then have a label and let Javascript hide the label when it loads. People without JS get a regular text area and a label. People with Javascript only get the placeholder. Graceful degradation.
     
    flithost, Oct 17, 2011 IP
  5. yho_o

    yho_o Active Member

    Messages:
    311
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    90
    #5
    <textarea onfocus="if(this.value == '[COLOR=#ff0000]default text[/COLOR]') { this.value = ''; }" onblur="if(this.value == '') { this.value = '[COLOR=#ff0000]default text[/COLOR]'; }">[COLOR=#ff0000]default text[/COLOR]</textarea>
    Code (markup):
    place your default text instead of "default text"
     
    yho_o, Oct 18, 2011 IP