Question

我正在尝试使用伪选择器和伪元素组合来创建自定义工具提示。

我的HTML：

<input id='test'/>

我的CSS：

#test {
    position: relative;
}

#test:focus {
    background-color: #08c;
}

#test:focus:before {
    position: absolute;
    left: 100%;
    width: 10px;
    height: 10px;
    background-color: black;
}

运行代码的小提琴：http://jsfiddle.net/9ujEH/

目前，当#test：focus聚焦时，输入将变为蓝色，但黑色sqaure不会像我想象的那样出现#test：focus：before。

Answer 1

伪元素只能在容器元素上定义。因为它们在容器本身作为DOM元素呈现的方式。输入不能包含其他元素，因此它们不受支持。另一方面，一个按钮虽然是一个表单元素，但它支持它们，因为它是其他子元素的容器。

More from the 2.1 spec

::after和::before伪元素现在使用双冒号来避免与伪类混淆（显然使用:），尽管旧版IE（7），8）不会识别双冒号。如果你试图支持它们，请记住这一点。

Answer 2

：之后＆amp; ：之前无法处理已取代元素＆amp; input是已替换元素。

选中此http://reference.sitepoint.com/css/replacedelements

Answer 3

这不起作用，因为input，如img，元素是无效/替换元素，并且没有'内容'可以说，因此似乎没有伪元素的位置插入元素中。

例如，使用div 可以使用多个伪选择器，例如：

div:hover::before {
    /* CSS */
}

JS Fiddle proof-of-concept

参考文献：

Replaced Elements, from MDN。

Answer 4

您可以使用:focus-within CSS伪类来实现您想要做的事情。

只需将input元素包装在<div>（或任何容器元素）中，如下所示：

<style>
    #test {
        position: relative;
    }

    #test:focus {
        background-color: #08c;
    }

    #mydiv:focus-within::after {
        content: "Careful! This field is case-sensitive!";
    }
</style>

<div id='mydiv'>
    <input id='test' />
</div>

我可以在同一个元素上使用多个伪选择器聚焦前/后吗？

4 个答案: