css中拖拽输入和选择的相关属性

Posted 2022-08-18 公众号_前端每日技巧

resize

​​textarea​​元素右下角的记号并上下左右拉伸，就会发生textarea元素的高度和宽度发生变化了，这个拉伸效果起到的作用就是resize。​​resize​​属性参数值比较多，初始值而为​​none​​，表示没有拉伸效果。常用来重置textarea元素内置的拉伸行为。​​both​​作用是既可以水平方向拉伸，也可以垂直方向拉伸。​​vertical​​作用是仅可以垂直方向拉伸，此时鼠标的指针也会变成垂直方向的拉伸样式。​​horizontal​​作用是仅可以水平方向拉伸，此时鼠标的指针也会变成水平方向的拉伸样式。​​block​​作用是表示沿着块级元素的排列方向拉伸，默认是垂直方向，也可能是水平方向，这主要取决于​​writing-mode​​值，这个属性值是后期新增的属性值。​​inline​​作用是默认是水平方向，如果使用使用writing-mode属性改成垂直排版，则inline的拉伸方向就会变成垂直方向，和block的属性值比较像。

textarea 
    resize: none;

​​resize​​属性不支持内联元素，而且如果是块级元素，需要overflow属性的计算值不是​​visible​​。当我们设置下面代码不会出现拉伸效果。所以resize属性不是设置了就有效果而是有一些条件。resize属性的元素通过拉伸改变元素的尺寸是通过改变​​width​​属性值和​​height​​属性值来实现的效果。如果我们想要元素的拉伸的尺寸不是无线的，我们可以通过设置css的这些属性值来进行限制拉伸尺寸​​min-width​​、​​min-height​​、​​max-width​​和​​max-height​​。

.wrapper 
    resize:both;
    // 如果没有设置下面这行代码，不会出现拉伸效果
    overflow: hidden;

​​resize​​属性的拖拽条和滚动条是同源的，所以就是在自定义滚动条尺寸的时候，resize属性拖拽条的尺寸也会跟着变化。resize属性拖拽条的样式可以使用​​::-wekit-resizer​​伪元素进行自定义，比如当我们换成另外的拖拽图标。由于resize属性生成的拖拽区域太小，如果在移动端使用并不是体验太好。

::-webkit-scrollabar 
    background-image: url(test.png);

如果我们想要拉伸的元素最小宽度为166px, 最大宽度为555px，我们可以这样进行设置：

.wrapper 
    min-width: 166px;
    max-width: 555px;
    overflow: hidden;
    resize: both;

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​​伪元素可以改变文字被选中后的颜色和背景色，还可以改变文字阴影颜色、下划线颜色和轮廓颜色，被选中的图像的样式也是可以修改的。支持的属性值也比较多，​​color​​、​​cursor​​、​​background-color​​、​​caret-color​​、​​outline​​和非缩写css属性、​​text-decoration​​和相关css属性、​​text-emphasis-color​​、​​text-shadow​​、​​stroke-color​​、​​fill-color​​和​​stroke-width​​属性。

img::selection 
    background-color: maroon;

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