解决方法：用普通标签模拟，背景图设置在普通标签里面，表单功能还是用input来实现，交互功能得用JavaScript来实现。换句话说，CSS控制普通标签的样式来美化表单，JavaScript实现表单交互功能。
网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了凌河免费建站欢迎大家使用！
案例分析：
移动端兼容 - 调用相册的按钮样式处理
具体情形：input type="file" accept="image/*;capture=camera"或者input type="file" capture="photo"设背景图无效。在我们的移动端网页当中，会有上传照片的操作需求。此时会使用到文件类型的input文本框，但是不同的系统不同的浏览器在样式上均不相同，而且，设置背景图也没有效果。
解决方法：通过设置opacity为0来进行模拟，背景图设置在其他标签里面。换句话说样式用普通标签模拟，功能用input来实现。
测试效果图：
《CSS美化表单大集锦》
为了达到更好的交互效果，提高用户友好度，对文本框输入框之类的美化工作是很必要的。 一般的美化工作可以直接通过使用CSS完成，方法也十分简单，如下： 1、首先制作一张输入框的背景图，如上图所示。 2、添加按钮的Html代码： input type=button class=Selectbg 3、然后用css代码将它定义：stylebody{font-size:12px; } .Selectbg{border:none; width:150px; height:20px; background-image:url(image.gif); text-align:left;line-height:20px; }/style 在写CSS代码的时候要注意，如果背景图中带边框，一定要将输入框的边框去掉，否则会显示默认边框；其次还要将高度和行高定义好，否则点击输入框后文字的位置会很难看。
给按钮添加css样式的方法：
添加方法：
1、.btn {BORDER-RIGHT: #7b9ebd 1px solid; 右边线
2、PADDING-RIGHT: 2px; 内边距 右
3、BORDER-TOP: #7b9ebd 1px solid; 上边线
4、PADDING-LEFT: 2px; 内边距 左
5、FONT-SIZE: 12px; 文字大小
6、BORDER-LEFT: #7b9ebd 1px solid; 左边线
7、CURSOR: hand; 鼠标移上去时，变成手形。
8、COLOR: black; 颜色黑 （表示文字颜色）
9、PADDING-TOP: 2px; 内边距 上
10、BORDER-BOTTOM: #7b9ebd 1px solid }底边线
扩展资料
CSS样式部分
大小 {font-size: 12px}，x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高 {line-height: normal;}(正常) 单位：PX、PD、EM
粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)
大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体： (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性： (background)
色彩 {background-color: #FFFFFF;}
图片 {background-image: url();}
重复 {background-repeat: no-repeat;}
滚动 {background-attachment: fixed;}(固定) scroll;(滚动)
位置 {background-position: left;}(水平) top(垂直);
字间距 {letter-spacing: normal;} 数值 /*这个属性有用，多实践下*/
对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
一般有三种方法：
Button标签直接使用CSS定义样式，优点是立体感、有按下状态，缺点是样式单一、各浏览器下显示效果不一致。
a标签+背景图片+滑动门技术，优点是可实现多种视觉效果，缺点是采用滑动门技术会导致背景图片过大。
a标签直接使用CSS3绘制，优点是在保证视觉效果的基础上大大减少了背景图片的使用，缺点是部分浏览器不兼容。
先给select加个div容器,然后给div设置overflow:hidden,把div的宽度调节到刚好把select的箭头隐藏,然后给div价格想要的箭头图,设置norepeat right,边框的话用border属性试试