changing a textarea's bgcolor

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Markus
    Recognized Expert Expert
    • Jun 2007
    • 6092

    #1

    changing a textarea's bgcolor

    If you take a look at the textarea for commenting on this page you'll see my desire.

    When hovering over the textarea the bgcolor changes, but once the textarea is clicked it maintains this new color until the area loses focus.

    What's going on guys?
  • harshmaul
    Recognized Expert Contributor
    • Jul 2007
    • 490

    #2
    wasup markus!!!

    CSS follows...
    Code:
    textarea:hover{
    	background:#ffc;
    	cursor:text;
    }

    Comment

    • Markus
      Recognized Expert Expert
      • Jun 2007
      • 6092

      #3
      Originally posted by harshmaul
      wasup markus!!!

      CSS follows...
      Code:
      textarea:hover{
      	background:#ffc;
      	cursor:text;
      }
      SUP DAWG!

      I was aware of this.

      But surely on mouseout the bgcolor reverts?

      Comment

      • Death Slaught
        Top Contributor
        • Aug 2007
        • 1137

        #4
        You can probably just use JavaScript it seems simple enough. On click change the background color and on blur change it back.

        Thanks,
        {\_/}
        (' . ')
        (")[DEATH](")
        (")(")

        PS - When my computer stops lagging I may try and do it and then post the code, but before I post it I want to see you try it. ^_^

        Comment

        • hsriat
          Recognized Expert Top Contributor
          • Jan 2008
          • 1653

          #5
          oohh... I caught Mark posting same question in 2 forums! :D

          I hope Mark got his answer by now. :)

          Comment

          • Death Slaught
            Top Contributor
            • Aug 2007
            • 1137

            #6
            lol and he still hasn't gotten a working example for IE6!

            Thanks,
            {\_/}
            (' . ')
            (")[DEATH](")
            (")(")

            Comment

            • hsriat
              Recognized Expert Top Contributor
              • Jan 2008
              • 1653

              #7
              ooohhh!! really?... he never said that...

              If he needs a JavaScript solution, then here it is...[html]<style type="text/css">
              textarea {
              background-color:#ffffff;
              border:#445588 solid 1px;
              }
              textarea.bright {
              background-color:#ccccff;
              border:#000000 solid 1px;
              }
              </style>
              <textarea name="markstext "
              cols="100"
              rows="5"
              onmouseover="if (this.title!='T he title ') {this.className ='bright';this. title='The title';}"
              onfocus="this.c lassName='brigh t';this.title=' The title ';"
              onmouseout="if (this.title!='T he title ') {this.className ='';this.title= '';}"
              onblur="this.cl assName='';this .title='';"
              title="">
              </textarea>
              [/html]
              If you want to provide a title say "My textarea" to the text area, just replace "The title" in the code it with, DON'T remove the space after the title!.

              This will miss just one case. Le'me see if Mark can find that.

              But still, I do recommend to use the CSS's hover and focus. And provide strict doctype if possible to validate that.

              Regards

              Comment

              • hsriat
                Recognized Expert Top Contributor
                • Jan 2008
                • 1653

                #8
                And this is better...[html]<style type="text/css">
                textarea {
                background-color:#ffffff;
                border:#445588 solid 1px;
                }
                textarea.bright {
                background-color:#ccccff;
                border:#445588 solid 1px;
                }
                textarea.bright 1 {
                background-color:#ccccff;
                border:#445588 solid 1px;
                }
                </style>
                <textarea name="markstext "
                onmouseover="if (this.className !='bright1') this.className= 'bright';"
                onfocus="this.c lassName='brigh t1';"
                onmouseout="if (this.className !='bright1') this.className= '';"
                onblur="this.cl assName='';"
                title="whatever title">
                </textarea>[/html]

                Comment

                • harshmaul
                  Recognized Expert Contributor
                  • Jul 2007
                  • 490

                  #9
                  WOW! you guys were up throughout the night!!! damn my time zone!

                  Comment

                  • hsriat
                    Recognized Expert Top Contributor
                    • Jan 2008
                    • 1653

                    #10
                    Originally posted by harshmaul
                    WOW! you guys were up throughout the night!!! damn my time zone!
                    It was your evening at the time. Don't damn your time zone.

                    My side it was 3:00AM :D, and 12 hours ahead DS.

                    Comment

                    • Markus
                      Recognized Expert Expert
                      • Jun 2007
                      • 6092

                      #11
                      Aren't you guys nice!

                      I completely forgot about this...

                      Haha, I also apologise for double posting :|

                      I had a slip in concentration!

                      Anyways, seems both threads have had a decent discussion, and plenty of suggestions. Time to have a read!

                      Thanks again, my lovelies.

                      Comment

                      Working...