Hide input image URL - html

Question

Am using the following code to change look of input file type, i just changed input select type as image and my problem is How can i hide input image URL
HTML
<form action="for.php" method="POST" enctype="multipart/form-data">
<input type="file" name="files[]" multiple id="files" class="hidden"/>
<input type="submit" id="sub"/>
</form>
CSS
input[type="file"] {
border: 1px gray dashed;
background:no-repeat center gainsboro;
text-indent: -9999em;
line-height:3000;
width: 128px;
height: 128px;
}
How do i hide image name after selected

Answer 1

Just skip above code and use following code
HTML
<form action="for.php" method="POST" enctype="multipart/form-data">
<div class="inputWrapper">
<input type="file" name="files[]" multiple id="files" class="hidden fileInput"/>
</div>
<input type="submit" id="sub">
</form>
CSS
.inputWrapper {
overflow: hidden;
position: relative;
cursor: pointer;
background-color: #DDF;
border: 1px gray dashed;
background: url('file_add.png') no-repeat center gainsboro;
text-indent: -9999em;
width: 200px;
height: 200px;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
font-size:50px;
}
.hidden {
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
OUTPUT