6

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

我的 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，输入将在聚焦时变为蓝色，但黑色方块并没有像我认为的#test:focus:before 那样出现。

4

5 回答 5

4

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

更多来自 2.1 规范

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

于 2013-03-15T16:15:46.670 回答
4

这不起作用input，因为img元素是无效/替换元素，并且没有“内容”可言，因此似乎没有地方可以在元素中插入伪元素。

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

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

JS Fiddle 概念验证。

参考：

于 2013-03-15T16:15:51.433 回答
3

: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>

有关的：

于 2019-02-18T15:54:46.863 回答
2

:after & :before不适用于替换元素 &input是替换元素。

检查这个http://reference.sitepoint.com/css/replacedelements

于 2013-03-15T16:15:35.160 回答
0

如果您不需要placeholder，这里有一个简单的跨浏览器选项。也适用于 IE。 jsfiddle

此外，您可以根据需要设置样式。

i[data-hint]::after      {
  /* position: absolute; */
  display: inline-block;
  content: attr(data-hint);
  vertical-align: middle;
  font-style: normal;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: 0.45s ease-out;
}

input:focus + i[data-hint]::after {
  width: auto;
  opacity: 1;
  margin-left: 10px;
}
<input /><i data-hint="Here my hint for input.."></i>

于 2022-02-14T17:00:31.723 回答