html - :focus::after 选择器问题

Question

我对::after 选择器有疑问，这是我的代码:

HTML:

...

<div class="post">
    <form>
         <textarea placeholder="Message Here..." maxlength="255"></textarea>
    </form>
</div>

...

CSS:

.wrapper .left_section .profile_small .post form textarea:focus::after {
    content:"<input type='submit' value='Post' />"; 
}

所以当文本区域被选中(聚焦)时，我希望提交按钮出现。 有谁知道解决方案吗？

提前致谢。

Answer 1

您可以使用 CSS 通用兄弟选择器来执行您想要的操作 — 但您必须先将提交按钮放入您的 HTML 中:http://jsfiddle.net/teddyrised/qRtX6/

<div class="post">
    <form>
        <textarea placeholder="Message Here..." maxlength="255"></textarea>
        <input type="submit" value="Post" />
    </form>
</div>

对于你的 CSS:

input[type='submit'] {
    display: none;
}
textarea:focus ~ input[type='submit'] {
    display: block;
}

警告:提交按钮必须放置在 textarea 元素之后，因为一般的连续兄弟选择器只在下游工作(即它不会寻找前面的兄弟) textarea，因此得名 successive)。