How to Style Input File Textbox

Styling an input type=file button

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:

<input type="file" style="width:200px">

Instead, you will need to use the size attribute:

<input type="file" size="60" />

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

How to customize the input type file button and text box

After watching your image, i think u want input type as a textbox and not button.Can u try with keeping input type file as hidden and have textbox like this

 <input id="txt" type = "text" value = "Choose File" 
       onclick ="javascript:document.getElementById('file').click();">
      <input id = "file" type="file" style='visibility: hidden;' name="img" onchange="ChangeText(this, 'txt');"/>

function ChangeText(oFileInput, sTargetID) {

    document.getElementById(sTargetID).value = oFileInput.value;
}

You can easily apply css to this textbox

DEMO

How to style file input?

In order to achieve that, you can wrap the input button with "label", so that label becomes clickable. Then make your input button opacity 0 (transparent).

$('.file-submit').on('change', function(){ $(this).closest('.btn-wrapper').find('span')         .text('FOTOS Formatos aceptados: JPG');})

.btn-wrapper {  font-family: 'Veranda', sans-serif;}
.btn-file {  padding: 8px 15px;  background-color: #fd8907;  border-radius: 3px;  color: #fff;  margin-right: 8px;}
.btn-file input[type=file] {    position: absolute;    top: 0;    right: 0;    min-width: 100%;    min-height: 100%;    font-size: 100px;    text-align: right;    filter: alpha(opacity=0);    opacity: 0;    outline: none;    background: white;    cursor: inherit;    display: block;}
.btn-file span {  display: block;  color: #777;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><td>  <div class="btn-wrapper">  <label class="btn-file">   Elegir archivos    <input type="file" class="file-submit" name="fileUpload" accept=".jpg" multiple="multiple"> </label>  <span>No se eligio archivo</span>  </div></td>

How to customize input type=file?

You can’t modify much about the input[type=file] control itself.

Since clicking a label element correctly paired with an input will activate/focus it, we can use a label to trigger the OS browse dialog.

Here is how you can do it…

label {   cursor: pointer;   /* Style as you please, it will become the visible UI component. */}
#upload-photo {   opacity: 0;   position: absolute;   z-index: -1;}

<label for="upload-photo">Browse...</label><input type="file" name="photo" id="upload-photo" />

CSS design a input field type=file

Here's the html:

<span class="filewrap">
    Some funny german words I don't understand
    <input type="file"/>
</span>

and here's the CSS:

.filewrap{
    position:relative;
    background:#000;
    border:1px solid #cc0000;
    padding:15px 100px;
    color:#fff;
    font-family:sans-serif;
    font-size:12px;
}

input[type="file"]{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    cursor:pointer;
}

See this demo fiddle

Styling an input type=file button

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:

<input type="file" style="width:200px">

Instead, you will need to use the size attribute:

<input type="file" size="60" />

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Styling an input type=file

I think I found two solutions to your problem. You are using: filter:alpha(opacity: 0)
on your .file class, thus hiding the actual "Browse..." button you usually see in upload controls.

The first solution would be to use a conditional to set the CSS that will replace your fancy "Select" image with the normal yet styled "Browse" button when the user is using IE.

The second one would be to play with the size of the FileAttachment input and so the hidden "Browse..." button would fit in the position of the "Select" image. From there you just have to make sure that the z-index property of the button is higher than the one of the image.

Let me know if these solutions solve your needs.

:D

Styling of the input type file not working

We cannot do much customization of the file input. But you have options like below.

Note: I have used Bootstrap for some classes as your code is using it. But if you want you can have custom classes as well.

One disadvantage is that the select file information is also hidden. If you want that you can get that using JavaScript and show below the button.

input[type='file'] {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<label>
  <input id="Image" type="file" class="form-control-image"         name="image_reference">
  <span class="btn btn-primary">File button</span>
</label>
<br />
<br />
<button class="btn btn-primary form-control-image">Submit</button>

Styling input type=file

The CSS way (base code found here):

<html>
    <style type="text/css">
        div.fileinputs {
            position: relative;
        }

        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>

    <div class="fileinputs">
        <input type="file" class="file" />

        <div class="fakefile">
            <input type="button" value="Select file" />
        </div>
    </div>
</html>

---

Related Topics