文字被选中时背景变蓝色,字体颜色变白色
时间: 2023-08-23 21:05:04 浏览: 67
您可以使用CSS来实现文字被选中时背景变蓝色,字体颜色变白色的效果。具体实现方法如下:
1. 在CSS中添加选择器,设置选中文字的样式:
```css
::selection {
background-color: blue; /* 设置选中文字背景色为蓝色 */
color: white; /* 设置选中文字字体颜色为白色 */
}
::-moz-selection {
background-color: blue; /* 设置Firefox浏览器中选中文字背景色为蓝色 */
color: white; /* 设置Firefox浏览器中选中文字字体颜色为白色 */
}
```
2. 在CSS中为需要设置选中文字样式的标签添加样式:
```css
p {
/* 设置默认样式 */
color: black;
background-color: white;
}
```
这样就能实现文字被选中时背景变蓝色,字体颜色变白色的效果了。需要注意的是,`::selection`伪元素只能在部分浏览器中生效,如Chrome、Safari、Opera等。在Firefox浏览器中,需要使用`::-moz-selection`伪元素来实现相同的效果。
相关问题
CSS如何设置textarea中的文字被选中时字体变大,没有被选中时字体变小
可以使用 CSS 中的 :focus 伪类来设置 textarea 中的文字被选中时字体变大,没有被选中时字体变小。
例如:
```css
textarea:focus {
font-size: larger;
}
textarea {
font-size: smaller;
}
```
上面的代码中,当 textarea 获得焦点时(被选中),文字的字体大小会变大;而当 textarea 失去焦点时(未被选中),文字的字体大小会变小。
注意,:focus 伪类只能用于可交互的元素,比如 form 表单中的 input、textarea 等。
css修改选中文字时的背景颜色
可以使用CSS的`::selection` 伪元素来修改选中文字时的背景颜色。以下是一个例子,将选中文字的背景颜色设置为黄色:
```css
::selection {
background-color: yellow;
}
```
你也可以设置其他样式,如字体颜色、字体大小等:
```css
::selection {
background-color: yellow;
color: black;
font-size: 16px;
}
```