input美化问题

对于前端来说,一个比较大的问题是,当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

原文地址:https://www.cnblogs.com/zcynine/p/5017546.html