Placeholder text in comment box. [Solved!]
Replies
Yo!
I want to achieve a result similar to this for my comment box :
Basically, there's a text that would appear in the comment box area and would disappear once you click in it (or once you start typing, either way are fine to me), I tried to mess with textarea:active & textarea:before with no luck, I'm sure my selectors are wrong since nothing happens no matter what property I put next to them. I feel like it's not so complicated but it's mindboggling me nonetheless.
If it's not possible to do so, I think I'll just put a background image that will appear before I click in the box, however my :before selector is still incorrect so I would like a helping hand for this.
Help! Thank you.
What you want to do is set the 'placeholder' attribute of an input element, sadly I think that is not reliably possible with css alone.
I imagine you could fake it out fairly convincingly by creating an element with your text in it layered under a transparent input box? And then make the input box turn opaque when active
Looking to adopt a December 31st, 1969 glitched date pet
What you want to do is set the &;placeholder&; attribute of an input element, sadly I think that is not reliably possible with css alone.</p>
<p>I imagine you could fake it out fairly convincingly by creating an element with your text in it layered under a transparent input box? And then make the input box turn opaque when active
Too bad! I could try what you've suggested, or my second option which would be a background image with my text in it, only visible at :before... Using a background image would give me more flexibility, I could animate it for instance!
What would be the correct selector for this? Technically if I tried my option it would work like that...
textarea {
url(myimage.gif);
}
But how do I set up the :before & :active for this selector?
I'd love to try your option too but I gotta admit that I wouldn't know where to start!
Thank you for your help!
By the way sorry if my sentences don't make any sense, I'm very exhausted.
I think your selectors were fine and what you were actually missing was that there is an background-image: none !important in default subeta code for....................some reason on a text area
So what you are looking for is sth like this
textarea {background-image:url() !important;}
textarea:active, textarea:focus {background-image:none !important;}
Looking to adopt a December 31st, 1969 glitched date pet
Oh wow! You made it work perfectly, I would have never guessed that! I have to add "" in the selector too otherwise it affects all of the text areas in my section codes, funny!
Thank you very much!
If absolute positioning the comment box and input is cool then here's the basic /* css content over comment box */
form {
position:relative;
}
form::before {
content:"asdasd";
position:absolute;
top:0;
left:0;
z-index:1;
}
.textbox {
position:absolute;
}
.textbox:focus {
z-index:2;
}