CSS怎么改变表单下拉框箭头和滚动条样式

html-css027

CSS怎么改变表单下拉框箭头和滚动条样式,第1张

CSS改变流动条的样式，代码如下：

scrollbar-face-color:#FEFAF1 (立体滚动条凸出部分的颜色) 

scrollbar-highlight-color:#FEFAF1 (滚动条空白部分的颜色) 

scrollbar-shadow-color:#FEFAF1 (立体滚动条阴影的颜色) 

scrollbar-arrow-color:#E6C3B9(上下按钮上三角箭头的颜色) 

scrollbar-base-color:#FEFAF1 (滚动条的基本颜色) 

scrollbar-darkshadow-color:#E6C3B9 (立体滚动条强阴影的颜色) 

scrollbar-3dlight-color:#E6C3B9(滚动条亮边的颜色) 

scrollbar-track-color:#FEFAF1} (滚动条的背景颜色)

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

解决方法：用普通标签模拟，背景图设置在普通标签里面，表单功能还是用input来实现，交互功能得用JavaScript来实现。换句话说，CSS控制普通标签的样式来美化表单，JavaScript实现表单交互功能。

案例分析：

移动端兼容 - 调用相册的按钮样式处理

具体情形：<input type="file" accept="image/*capture=camera">或者<input type="file" capture="photo">设背景图无效。在我们的移动端网页当中，会有上传照片的操作需求。此时会使用到文件类型的input文本框，但是不同的系统不同的浏览器在样式上均不相同，而且，设置背景图也没有效果。

解决方法：通过设置opacity为0来进行模拟，背景图设置在其他标签里面。换句话说样式用普通标签模拟，功能用input来实现。

测试效果图：

《CSS美化表单大集锦》