css中输入和选择的相关行为

178 阅读2分钟

这是我参与11月更文挑战的第29天,活动详情查看:2021最后一次更文挑战

caret-color

caret-color属性的作用是可以改变输入框插入光标颜色,同时又不改变输入框里内容的颜色而且caret-color属性不仅对原生的输入表单控件有效,也适合用于设置contenteditable的普通html标签。

input {
    color: #ccc;
    caret
    -color: blue;
}

以上案例中的效果是光标颜色变成蓝色,文字颜色还是灰色。

user-select

user-select可以用于禁止图文被选中,语法使用user-select: auto | text | none | contain | all,其中text表示文字和图片可以被选中,contain表示元素可以被选中,all表示元素的内容需要整体选中,并不是所有类型的内容都可以被选中,可以用于对某片段内容进行增删处理的时候或者模拟浏览器原生的整体选中效果。如果模拟浏览器的元素选中效果我们使用的方法是将一张透明图像作为子元素覆盖在需要编辑的元素中。

当user-select属性无论设置为什么,::before::after伪元素生成的内容都表现为none,意思就是说生成的内容永远无法被选中。user-select的初始值为auto。如果将父元素的user-select属性值设置为all,那么当前这个元素的user-select属性值的表现值也为all。如果将父元素的user-select属性值设置为none,则当前这个元素的user-select属性值变现值也为none。user-select属性没有继承,只是初始值auto的渲染表现使得父元素中设置user-select的效果子元素中也会有。

section {
    user-select: all;
}

selection

css中我们可以使用::selection伪元素可以改变文字被选中后的颜色和背景色,还可以改变文字阴影颜色、下划线颜色和轮廓颜色,被选中的图像的样式也是可以修改的。支持的属性值也比较多,colorcursorbackground-colorcaret-coloroutline和非缩写css属性、text-decoration和相关css属性、text-emphasis-colortext-shadowstroke-colorfill-colorstroke-width属性。

img::selection {
    background-color: maroon;
}

::selection因为框选方便,所以这个伪元素主要用在桌面端网页中,而且这个伪元素还可以用于很多大型网站,可以用于网站的全局设置,把整个网站的文字或者图像被选中后的背景色设置为网站的主题色或者标志色,从而加强品牌色的视觉传达效果。而且兼容器也比较好,支持ie9以上浏览器。