对于前端来说,一个比较大的问题是,当HTML提供的最原始的控件长的很丑可是又没有相应的属性去更改,碰到这个问题时我们应该怎么办?比如radio的那个单选框我觉得好丑啊,怎么办呢?一个很好的思路就是把它隐藏掉(透明度设为0),用美观的图片或者能用CSS3来实现的东西代替,而实际的触发事件还是传给被隐藏的原始控件。
(先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。)
之前碰到一个问题就是HTML中的<input type="file" />这个问题,当时同事问我,我一下也想不出头绪,后来同事给解决了,就是把这个input给隐藏掉用新的div写一个button出来然后将点击事件传给被隐藏掉的input,机智!于是我就自己查了一下,记录下来。
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的。
HTML布局
<a href="javascript:;" class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </a>
CSS样式,具体颜色线条样式不写,只写关键样式
.a-upload { cursor: pointer; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { opacity: 0; filter: alpha(opacity=0); } .a-upload:hover { text-decoration: none }
radio同理
HTML
<span class="test_list_span on"> <input type="radio" checked="checked" name="truelist" value="1" class="true_list"> </span>
CSS
.test_list_span { cursor: pointer; text-align: center; background-image: url(images/test-img_unselected.gif); background-repeat: no-repeat; } .true_list { opacity: 0; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .on { background-image: url(images/test-img_selected.gif); }
文章来源:
http://www.haorooms.com/post/css_input_uploadmh
http://www.haorooms.com/post/css_mh_ck_radio