How can I get a div to appear when a textarea is in focus? (both are children of the same form element)

Question

I'm having trouble getting my CSS to work :(

HTML

<form action="/api/submit/" method="post">
    <textarea name="post" rows="2"></textarea>
    <input type="url" name="url" />
    <div>
        <input type="radio" name="someName" value="someValue" />
    </div>
    <button type="submit">Submit</button>
</form>

CSS

form > input {
    display: none;
    position: absolute; top: -2.5em; left: 0;
}
form > textarea:focus + input {
    display: block;
}
form > div {
    display: none;
    position: absolute; top: 0; left: -6.66%;
}
form > textarea:focus + input + div {
    display: block;
}

What I want is to have the div and the input elements to appear when the textarea is in focus. At the moment, only the input element is doing what its supposed to do.

Also, I can select the div if I don't use :focus on the textarea, which is strange.

Answer 1

Part of your problem is the positioning. However, it's worth noting that unless you are using the most current browsers, this combination of CSS rules is not going to work reliably in older browsers - IE < 8 particularly.

Furthermore, the other inputs will disappear as soon as you blur the textarea. Is this your goal? That doesn't seem like a very usable form...

Although I commend using CSS whenever possible, I would suggest looking into handling your behavior with JavaScript.