Snippet Support

[4seven]

Snippet Support

[4seven]

Adding Background image to textarea

Post by Martin_K

Is there any way of having the background image disappear when inputting text?

[4seven]

Open

styles/prosilver/template/posting_editor.html

Find

Code: Select all

    name="message" id="message" style="background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;"

Replace with

Code: Select all

    name="message" id="message" style="background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;" onmouseover="this.style.backgroundColor='#FFFFFF';"

[Martin_K]

Can't get this to work. Is there a way to do this with css, hover and focus, over the whole text box, and not just the image?

[Martin_K]

I have nearly got it working the way I want by using the input[type=text] css attribute selector, so when you click in the box to start typing the background can be made to disappear. Thanks for your efforts.

[4seven]

I check it out and call back

[4seven]

Simply a little change:

Open

styles/prosilver/template/posting_editor.html

Find

Code: Select all

    name="message" id="message" style="background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;"

Replace with

Code: Select all

    name="message" id="message" style="background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;" onmouseover="this.style.background='#FFFFFF';"

Tested. If you want to make it work another way, explain exactly what you want..

[martin123456]

And for quickreply_editor.html

Code: Select all

<textarea style="height: 20em; background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;"

Replace with

Code: Select all

<textarea style="height: 20em; background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;"onmouseover="this.style.background='#FFFFFF';"

Tested and works.

[Stoker]

I suggest you use onfocus instead og onmouseover.

Downside with both solutions is that the bg image isnt reinstated when focus is out.
Maybe we should look at the way the search bar works.

[martin123456]

Best way is to use the css fade effect onmouseover wink wink