How to hide text field in Html File Upload

I am wondering how to hide the text field portion of a standard html f开发者_Python百科ile upload tag

for example

<input type="file" name="somename" size="chars"> 

This generates obviously a text field and next to that field is a browse button... I want to hide the text field part but keep the button.

This will surely work i have used it in my projects.I hope this helps :)

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

I'd recommend hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.

You can do this with CSS and javascript -- check out this article (actually the second time I've used this reference today).

The easiest way as not mentioned in any answer would be to use a label for the input.

<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>

input[type="file"] { display: none; }

Using label will be useful because clicking on the label is clicking on the input. This will only work when input's id is equal to label's for attribute.

You can put an image as a background for the button. That worked for me, a while ago.

The file input button is extremely difficult to style and manipulate, mainly for security reasons.

If you really need to customize your upload button, I recommend a Flash based uploader like SWFUpload or Uploadify that enables you to use a custom image as button, display a progress bar, and other things.

However, its basic philosophy differs from just embedding a control into a form. The uploading process takes place separately. Make sure you check out first whether this works for you.

DEMO

Pure css and html

The trick is to use a button above the input file button.

Plus, you should set

filter: alpha(opacity=0);

to the input file.

You could possibly hide the whole element and show a button or link instead. This is rather easy.

<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" />
<input type="button" value="Select an Image" onclick="$('#fileupload').click();" />

The file upload element is hidden. The button will fire the click event and shows the file browser window. On selecting a file, the change event is fired and this can submit a form or call a script function, whatsoever.

Hope this helps...

input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px);  } /* Hide input field */
@-moz-document url-prefix()
  {
  input[type="file"] { clip: rect(0, 265px, 22px, 125px);  } /* Mozilla */
  }
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */

This will do the same without JavaScript, but requires absolute positioning to use the clip property.

References

• Custom Upload Button
• CSS Wikibook: Clipping

If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field

It will display the file input field as a bootstrap button and will show selected file names beautifully. Additionally, you can set various restrictions using simple data-attributes or settings in js.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.

Try adding this css to your input

    font-size: 0;

Hello I get inspired by @shiba and here is solution in Angular 9:

    <input type="file" [id]="inputId" class="form-control" [style.display]="'none'"
        [accept]="acceptedDocumentTypes" [multiple]="true" #fileInput
        (change)="fileChange($event)" (blur)="onTouched()">

    <input type="button" class="form-control" value="Browse..." (click)="fileInput.click()"/>

you can set it's content to empty string like this :

<input type="file" name="somename" size="chars" class="mycustominput"> 

and in your css file :

.mycustominput:after{
    content:""!important;
}

You can hide the text behind the button changing the buttons width to 100% using the webkit-class. The button will then overlap the <span> behind itself on the shadow-root.

There is no need to apply any opacity, transparency or hidden attribute to the button, it's just a bit different to style compared to other objects and this will keep the localisation of the form element alive.

This will do the trick and is supported (MDN):

input[type=file]::-ms-browse { /* legacy edge */
  width: 100%;
}

input[type=file]::file-selector-button { /* standard */
  width: 100%;
}

input[type=file]::-webkit-file-upload-button { /* webkit */
  width: 100%;
}