CSS可以为文件上传添加自定义的滚动条,让上传文件时的滚动条变得更加美观实用。/* 隐藏默认的上传按钮 */ input[type= file ] { display: none; } /* 为上传文
CSS可以为文件上传添加自定义的滚动条,让上传文件时的滚动条变得更加美观实用。
/* 隐藏默认的上传按钮 */ input[type="file"] { display: none; } /* 为上传文件容器添加滚动条 */ .file-upload-container { height: 150px; /* 设置容器高度,保证滚动条出现 */ overflow-y: scroll; /* 显示纵向滚动条 */ scrollbar-width: thin; /* 细化滚动条宽度 */ } /* 修改滚动条样式 */ .file-upload-container::-webkit-scrollbar { width: 8px; /* 设置滚动条宽度 */ } .file-upload-container::-webkit-scrollbar-thumb { background-color: #ccc; /* 设置滚动条拖动块颜色 */ border-radius: 10px; /* 设置拖动块圆角 */ } .file-upload-container::-webkit-scrollbar-track { background-color: #f2f2f2; /* 设置滚动条背景色 */ }
以上代码可以很好地为文件上传容器添加自定义的滚动条,让上传文件操作更加方便快捷。需要注意的是,为了让滚动条生效,需要设置上传文件容器的高度,并隐藏默认的上传按钮。
粉丝
0
关注
0
收藏
0