对input使用伪类(::after,::before)不显示的解决方法
时间: 2023-08-18 22:04:10 浏览: 127
在使用CSS伪类`::before`和`::after`时,如果它们的content属性没有被设置或者设置为空字符串,那么它们是不会显示的。如果你希望在使用这些伪类时也能让它们显示出来,可以尝试以下几种方法:
1. 设置content属性的值为一个空格或者其他字符,例如:
```css
.my-element::before {
content: " ";
/* 其他样式 */
}
```
2. 将伪类的display属性设置为`block`或者`inline-block`,例如:
```css
.my-element::before {
display: inline-block;
/* 其他样式 */
}
```
3. 为伪类设置宽度和高度属性,例如:
```css
.my-element::before {
content: "";
width: 10px;
height: 10px;
/* 其他样式 */
}
```
以上方法可以根据具体情况进行选择和组合,以达到让伪类显示出来的效果。
相关问题
有关input的伪类
关于input的伪类,根据引用[1]和引用[2]的内容,可以得出以下结论:
- 在某些浏览器中,如Chrome,一些输入类的input框不支持设置伪类(::before, ::after)。只有操作类的伪类可以使用。
- 通过给input的父元素添加伪类元素(::before)来实现效果。例如,可以给.cont_list_item的.item_check元素添加::before伪类来实现样式效果。
- 选中状态时,可以通过:checked伪类来设置样式。例如,可以使用.cont_list_item .item_check[type="checkbox"]:checked来设置选中状态下的样式。
综上所述,可以使用伪类来为input元素添加样式,但需要注意浏览器的兼容性。
伪元素before和after
伪元素before和after是CSS中的两个特殊的伪元素,它们可以在元素的内容前或内容后插入一些内容。
- before:在元素内容前插入内容,使用::before或:before表示。
- after:在元素内容后插入内容,使用::after或:after表示。
使用伪元素before和after可以实现一些特殊的效果,比如在文本前面或后面添加特殊符号、图标等。同时也可以通过CSS属性来控制插入的内容的样式、位置等。
示例代码:
```
p::before {
content: "→ ";
color: red;
}
p::after {
content: " ←";
color: blue;
}
```
上述代码会在所有的p元素内容前插入一个红色的箭头,同时在内容后插入一个蓝色的箭头。
注意:伪元素before和after只能用于有内容的元素,比如div、p、span等,不能用于空元素,比如img、input等。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)