我无法让我的 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
元素在做它应该做的事情。
此外,如果我不在 textarea
上使用 :focus
,我可以选择 div
,这很奇怪。
最佳答案
你可以使用 css3
form > textarea:focus ~ div {
display: block;
}
其中 ~ 是一般的前一个兄弟选择器 w3c css3 selector recommendation
演示:jsfiddle
关于html - 当文本区域处于焦点时,如何让 div 出现? (两者都是同一表单元素的子元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3242899/