Input[type=file] This thing is placed directly on the page. Big Ugly! , directly using CSS to change the style of this input, it will be the button and the following text at the same time action. Because they are a whole.
So, we need to set the original button transparency opacity to 0, wrap it with DIV in its outer layer, and then make a style change to this div, so that we can draw a Meimei upload file!
DOM Structure:
CSS style:
. a_upload {
PADDING:4PX 10px;
Margin-bottom: -10px;
margin-left:20px;
height:20px;
line-height:20px;
position:relative;
Cursor:pointer;
Color: #888;
Background: #fafafa;
border:1px solid #ddd;
border-radius:4px;
Overflow:hidden;
}
. a_upload Input {
Position:absolute;
font-size:100px;
right:0;
top:0;
opacity:0;
Filter:alpha (opacity=0);
Cursor:pointer
}
. a_upload:hover {
Color: #eee;
Background: #ebffff;
Border-color: #ccc;
Text-decoration:none
}
That's what it's like to be done:
, or you can change it on your own as you like.
Input[type=file] CSS Style