CSS美化上传按钮、复选框和单选样式
时间:2023-03-30 16:30:30
CSS
思路:美化的思路是先将上一个按钮的不透明度设置为0,然后在外层包裹一个div,实现美化功能。input[type=file]上传按钮美化代码如下:Style1:/*aupload*/.a-upload{padding:4px10px;高度:20px;行高:20px;位置:相对;游标:指针;颜色:#888;背景:#fafafa;边框:1px实心#ddd;边界半径:4px;溢出:隐藏;显示:内联块;*显示:内联;*zoom:1}.a-uploadinput{position:absolute;字体大小:100px;右:0;顶部:0;不透明度:0;过滤器:alpha(不透明度=0);cursor:pointer}.a-upload:hover{颜色:#444;背景:#eee;边框颜色:#ccc;文本装饰:无}样式2:.file{位置:相对;显示:内联块;背景:#D0EEFF;边框:1px实心#99D3F5;边界半径:4px;填充:4px12px;溢出:隐藏;颜色:#1E88C7;文字修饰:无;文本缩进:0;line-height:20px;}.fileinput{position:absolute;字体大小:100px;右:0;顶部:0;不透明度:0;}.file:hover{背景:#AADFFD;边框颜色:#78C3F3;颜色:#004974;文本装饰:无;}html:点击此处上传文件选择文件结果:样式一:样式二:radio美化代码如下:背景图片:样式:.pay_list_c1{宽度:24px;高度:18px;向左飘浮;游标:指针;文本对齐:居中;右边距:10px;背景图像:url(图像/inputradio.png);背景重复:不重复;背景位置:-26px0;}.radioclass{宽度:100%;高度:100%;不透明度:0;游标:指针;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);}.on{background-position:00;}html:
JS:$(".pay_list_c1").click(function(){$(this).addClass("on").siblings().removeClass("on");})结果:checkbox美化代码如下:背景图片:样式:.piaochecked{width:20px;高度:20px;向左飘浮;游标:指针;左边距:10px;文本对齐:居中;背景图像:url(图像/checkbox_01.png);背景重复:不重复;背景位置:00;}.on_check{背景位置:0-21px;}.radioclass{不透明度:0;游标:指针;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";过滤器:alpha(opacity=0);}html: