Как я могу получить div, когда текстовая область находится в фокусе?(оба являются потомками одного и того же элемента формы) - PullRequest
Новая
       7

Как я могу получить div, когда текстовая область находится в фокусе?(оба являются потомками одного и того же элемента формы)

0 голосов
/ 14 июля 2010

У меня проблемы с тем, чтобы заставить мой CSS работать: (

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;
}

Я хочу иметь div и элементы input, появляющиеся, когда textarea находится в фокусе. На данный момент только элемент input делает то, что должен делать.

Кроме того, я могу выберите div, если я не использую :focus на textarea, что странно.

Ответы [ 2 ]

3 голосов
/ 06 июля 2012

с помощью css3 вы можете использовать 

form > textarea:focus ~ div {
    display: block;
}

где ~ - общий предыдущий селектор брата w3c рекомендация селектора css3

демо: jsfiddle

0 голосов
/ 14 июля 2010

Частью вашей проблемы является позиционирование.Однако стоит отметить, что если вы не используете самые современные браузеры, эта комбинация правил CSS не будет надежно работать в старых браузерах - особенно в IE <8. </p>

Более того, другие входные данные исчезнут, как толькокак ты размываешь текстовое поле.Это твоя цель?Это не очень удобная форма ...

Хотя я рекомендую использовать CSS всякий раз, когда это возможно, я бы посоветовал разобраться с вашим поведением с помощью JavaScript.

...