标签归档:CSS3

CSS设置选中文字高亮背景颜色

如果想让网站风格更加统一,有时候你会苦恼于浏览器默认的选中文字的蓝色背景,有时候真的与网站风格不相匹配,所以需要利用CSS来更改并统一显示效果。

在 Windows 中,Internet Explorer 与 Microsoft Edge,或者 Google Chrome等浏览器,都只是默认的蓝色选中背景。

而在 macOS 中,情况能好一些,因为用户可以自定义高亮显示颜色,但这也仅仅在本机上,无法对于所有用户统一的体验。

所以,就要在CSS文件中添加以下代码:(用 #FF9 演示)

::selection {
background:#FF9;  //更改颜色
color:#F00;
}
::-moz-selection {
background:#FF9;  //更改颜色
color:#F00;
}
::-webkit-selection {
background:#FF9;  //更改颜色
color:#F00;
}

选中效果:

继续阅读CSS设置选中文字高亮背景颜色

CSS简单滚动条样式

浏览器的默认滚动条发展到今天,已经发展到很简约的风格了,但有时候为了更好的显示效果,我们可以利用CSS代码,简单的修改一下滚动条的样式。

展示效果:Demo

浏览器的支持:

仅支持 Internet Explorer,不支持 Chrome 和 Microsoft Edge

CSS代码规则如下:

先来看一下引入的CSS代码样式的格式:

SCROLLBAR-ARROW-COLOR: color; //箭头颜色
SCROLLBAR-FACE-COLOR: color;  //箭头和滚动条面板颜色
SCROLLBAR-DARKSHADOW-COLOR: color; //滚动条右下方颜色
SCROLLBAR-HIGHLIGHT-COLOR: color;  //滚动条左上方颜色
SCROLLBAR-3DLIGHT-COLOR: color;  //滚动条边缘左上颜色
SCROLLBAR-SHADOW-COLOR: color;   //滚动条边缘右下颜色
SCROLLBAR-TRACK-COLOR: color;  //滚动区域底层颜色

我们很容易可以看出每一条声明规则应用的范围;同时,还可以使用Scrollbar呈现出代码和结果:

scrollbar-settings

继续阅读CSS简单滚动条样式