style input type file with css

by Kuldeep Sheoran

HTML

<!--
Text Upload file Button
-->


<div class="upload_wrapper" style="float: left;" id="up0">
        <div style="text-align: center;">
        Upload File
        </div>
        <input  style="width: 100px;height:100px;" id="uploadbtn1" name="pic[]" type="file" class="upload" />
        </div>
        <br/>
        <br/>

<!--
Link Upload file Button
-->     

        <div class="upload_wrapper" style="float: left;" id="up0">
        <a href="#">Upload File</a>
        <input  style="width: 100px;height:100px;" id="uploadbtn2" name="pic[]" type="file" class="upload" />
        </div>    
        <br/>
        <br/>
 
<!--
Button Upload file Button
-->     

              
        <div class="upload_wrapper" style="float: left;" id="up0">
        <div>
        <input type="button" value="Upload File"/>
        </div>
        <input  style="width: 100px;height:100px;" id="uploadbtn3" name="pic[]" type="file" class="upload" />
        </div>
            
        <br/>
        <br/>

<!--
Image Upload file Button
-->     

            
        <div class="upload_wrapper" style="float: left;" id="up0">
        <img src="http://www.voodoodesign.com/wp-content/uploads/2012/10/Upload-Big-Button.png" style="height:40px;"/>
        <input  style="width: 100px;height:100px;" id="uploadbtn4" name="pic[]" type="file" class="upload" />
        </div>
        <br/>
        <br/>
<br/>

<!--
Div Upload file Button
-->     

           
        <div class="upload_wrapper" style="float: left;" id="up0">
        <div style="border:solid 1px grey;text-align: center;background-color: red;width: 100px;height: 100px;">
        <br/>This<br/>is Div<br/>
        </div>
        <input  style="width: 100px;height:100px;" id="uploadbtn5" name="pic[]" type="file" class="upload" />
        </div>

CSS

.upload_wrapper {
	position: relative;
	overflow: hidden;
        cursor: pointer;
	//margin: 10px;
}
.upload_wrapper input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}