自定义滚动条后textarea resize拖拉位置出现边框

CSS3自定义滚动条样式

自定义滚动条实现

此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：
滚动条组成部分

1. ::-webkit-scrollbar 滚动条整体部分
2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）
3. ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
6. ::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方
7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

普通滚动条样式代码：

::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         -webkit-box-shadow: none;
        background: #c2d3e3;
    }

::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: none;
        border-radius: 10px;
        background: #fff;
}

• 问题开始了
  需求一（需要滚动条不贴边，与内容区和边框都要5px距离，滚动条滑块5px，滑块圆角）

  • 最初的想法，将滑道增加padding：5px----------------没用pass
  • 使用线性渐变背景色，background-image: linear-gradient(to right, #fff 0,#fff 33.33%,#c2d3e3 33.33%,#c2d3e3 66.67%,#fff 66.67%,#fff 100%);视觉效果可以，但是TMD两头圆角没法整（看上去太不圆了），因为其实你是想让中间那1/3的视觉滑块圆角。------------pass
  • 给滑块增加白色边框border-left: 5px solid #fff;border-right: 5px solid #fff;，背景色background: #c2d3e3;看上去比上面的效果好很多，圆角虽然理论上也会有不圆的问题，但是通过调整视觉效果差异很小。--------目前采用

• 还有个更鸡儿的问题：
  发现textarea右下角的拖拽区，不输入的时候是正常的。当输入内容超过当前高度出现滚动条时，TMD出现了边框。

  • 本来想着::-webkit-resizer { border: 0 none},去掉边框不就完事了么。鸡儿的，万万没想到，在出现滚动条后进行拖拽发现整个不见了，但是在右下角那个位置还是可以拖拽的。拖拽结束还是看不见。------pass
  • 接上面的问题，不就是少了两条杠么，想着用右下角::-webkit-scrollbar-corner通过设置渐变背景模拟resize那两条杠。--------未出现滚动条前本来就是存在的，但是滚动条出现的时候通过这个模拟也能行，但是重新失去滚动条时消失不见了。（绝望）
  • 哈哈哈，但是最后用一种比较low的办法解决了这个问题。想着在用textarea的伪元素把那两条边线盖住不就好了么（textarea是不可以使用伪元素的），那好吧给你套上div再用div的伪元素定位右下角遮住这两条边线。------大功告成。

你看到这儿了，如果你有更好的办法，请留言给我，我也不想走的那么弯路。