html文件上传 用到美化,文件上传html样式美化

最近学习jquery file upload插件，以为文件上传按钮样式代码能够拿来一用，适当作了些美化。css

图片选择

.fileinput-button {

position: relative;

overflow: hidden;

background: #fabe00;

width: 70px;

height: 30px;

color: #fff;

font-size: 14px;

text-align: center;

border: 0;

border-radius: 5%;

line-height: 30px;

}

.fileinput-button:hover {

background: #FF8650;

}

.fileinput-button input {

position: absolute;

top: 0;

right: 0;

margin: 0;

opacity: 0;

-ms-filter: 'alpha(opacity=0)';

font-size: 200px;

direction: ltr;

cursor: pointer;

}

/* Fixes for IE < 8 */

@media screen\9 {

.fileinput-button input {

filter: alpha(opacity=0);

font-size: 100%;

height: 100%;

}

顺便说下，我遇到的问题：inline-block元素使用overflow: hidden后元素上移。只需加上

.fileinput-button {

vertical-align: middle;

}效果如图，好看多了