文件上传控件 css,CSS3 自定义文件上传输入控件界面

CSS

语言：

CSSSCSS

确定

body{background: white;}

.wrap {

max-width: 60%;

margin: 50px auto;

}

.file {

position: relative;

display: inline-block;

cursor: pointer;

height: 2.5rem;

}

.file input {

min-width: 14rem;

margin: 0;

filter: alpha(opacity=0);

opacity: 0;

}

.file input:focus ~ .file-custom {

box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.2rem #0074d9;

}

.file-custom {

position: absolute;

top: 0;

right: 0;

left: 0;

z-index: 5;

height: 2.5rem;

padding: 1rem 1rem 0;

line-height: 1.5;

color: #555;

background-color: #fff;

border: 0.075rem solid #ddd;

border-radius: 0.25rem;

box-shadow: inset 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.file-custom:after {

content: 'Choose a Team Pic';

}

.file-custom.active:after {

content: attr(data-label);

}

.file-custom:before {

position: absolute;

top: -0.075rem;

right: -0.075rem;

bottom: -0.075rem;

z-index: 6;

display: block;

content: "Browse";

height: 2.5rem;

padding: 1rem 1rem 0;

line-height: 1.5;

color: #555;

background-color: #eee;

border: 0.075rem solid #ddd;

border-radius: 0 0.25rem 0.25rem 0;

}