How to make the button background input file?

The question was asked: 6 years 11 months ago   views: 20
<div class="file">
 <input type="file" class="file-btn" name="file" value="Choose file..." >

.file-btn {
 display: block;
 position: absolute;
 top: 0px;
 left: 0px;
 background: #000 url(../images/file.png) repeat-x;
 border: none;
 width: 110px;
 height: 19px;
 z-index: 2;

How to make the button background input file?

Asked: Hancock888 Hancock888 22-06-2012 в 00:06:29

Answers   1


At the end of the link to the archive with pictures and source code css and html. The name of the file you can write in any diva or input.


<div style="margin: 10px">
 <input type='button' value='Review' id='browse_button' />
 <input type='text' id='file_name' readonly=""/>
 <input type='file' id='file_browse' style='margin-left: -9999px'/>


form {
 font-size: 16px;
 font-family: Verdana;

input[type="submit"], input[type="button"] {
 cursor: pointer;
 border: none;
 padding: 4px 28px;
 color: white;
 background-color: #408B98;
 border-radius: 4px;
 font-family: Calibri, Tahoma, sans-serif;
 font-size: 16px;
 letter-spacing: 2px;
} input[type="submit"]:hover, input[type="button"]:hover {
 background-color: #36828F;
 text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.400);
} input[type="submit"]:active, input[type="button"]:active {
 background: #23636E;
} input[type="text"] {
 width: 320px;
 padding: 4px 8px;
 border-radius: 4px;
 border: 1px solid #AAA;
 font-family: Verdana;
 font-size: 14px;


$(document).ready(function() {
 $('#browse_button').click(function() {
 $('#file_browse').click().change(function() {
 var lastIndexOfSep = this.value.lastIndexOf('\\'); // Windows
 if (lastIndexOfSep == -1)
 lastIndexOfSep = this.value.lastIndexOf('/'); // Linux
 var fileName = this.value.substring(lastIndexOfSep + 1, this.length);

Example on jsFiddle

Answered: Athari Athari 22-06-2012 в 00:31:10
Kremchik You pros. And how call a change of style? - Вячеслав Кириченко Вячеслав Кириченко 22-06-2012 в 00:47:57
Welcome! I think it would be possible to write in the review. I do not quite understand the question? - ivkremer ivkremer 22-06-2012 в 00:59:39
@Kremchik the Only thing that display full path "for any diva or input" will not work. will c:\fakepath\file.png... And so, +1 - Yura Ivanov Yura Ivanov 22-06-2012 в 01:27:41
Well, the name of the file, not the path. Only noble IE shows the full path %) Firefox automatically takes the file name only - in fact, most users only it should be, so there is no problem. - ivkremer ivkremer 22-06-2012 в 01:42:52
This is considered a vulnerability, the way contains a lot of things that web services are not supposed to know. - karmadro4 karmadro4 22-06-2012 в 04:54:12