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:;
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:;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.on {
background-image: url(images/test-img_selected.gif);
}

input美化问题

input美化问题

文章来源:

http://www.haorooms.com/post/css_input_uploadmh

http://www.haorooms.com/post/css_mh_ck_radio

上一篇:Qt5:随窗口大小变化背景图片自动缩放的实现


下一篇:[转帖] windows server 不同版本说明