Change/Remove "No file Chosen" text of input type "file"

# Table of Contents

# Change/Remove "No file Chosen" text of input type "file"

The easiest way to change or remove the "No file chosen" text from an input type "file" is to:

Hide the file input element.
Associate a label with the element and sets its for attribute to the input's id.
When the user clicks on the label, the file input will open.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }

      #file-input {
        display: none;
      }

      #file-input-label {
        font-size: 1.3em;
        padding: 10px 15px;
        border: 1px solid black;
        border-radius: 4%;
      }
    </style>
  </head>

  <body>
    <input type="file" id="file-input" name="file-input" />

    <label id="file-input-label" for="file-input"
      >Select a File</label
    >
  </body>
</html>

change or remove no file chosen input type file

The code for this article is available on GitHub

We set the display CSS property of the file input to hidden to hide the element.

style.css

Copied!
#file-input {
  display: none;
}

The file input has a label that is associated with it, so clicking on the label opens the file selection box.

index.html

Copied!
<input type="file" id="file-input" name="file-input" />

<label id="file-input-label" for="file-input"
  >
  Select a File
</label>

Note that the id of the input element has to match the label's for value.

Otherwise, clicking the label won't open the file selection box.

You can set the text of the label element to something that suits your use case.

You can also style the label element as you see fit.

style.css

Copied!
#file-input-label {
  font-size: 1.3em;
  padding: 10px 15px;
  border: 1px solid black;
  border-radius: 4%;
}

If you use React.js, make sure to set the htmlFor attribute on the label instead of for.

App.js

Copied!
<input type="file" id="file-input" name="file-input" />

<label id="file-input-label" htmlFor="file-input">
  Select a File
</label>

The for attribute is named htmlFor in React.js.

# Removing the "no file chosen" text by setting `overflow` to `hidden`

A hacky solution to remove the "no file chosen" text is to set the overflow CSS property on the file input to hidden and limit its width.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }

      #file-input {
        width: 90px;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <input type="file" id="file-input" name="file-input" />
  </body>
</html>

remove no file chosen input type file by setting overflow to hidden

The code for this article is available on GitHub

We set the width of the file input to 90px.

You might have to adjust the value.

When the element's overflow property is set to hidden, the content that overflows is clipped and not shown.

You can also set the color of the file input to transparent to remove the "No file chosen" text.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }

      #file-input {
        color: transparent;
      }
    </style>
  </head>

  <body>
    <input type="file" id="file-input" name="file-input" />
  </body>
</html>

set color of file input to transparent

However, this has the disadvantage that the name of the select file is also not shown.

You can also set the text color of the file input to transparent the ::after pseudo-selector to add a label-like note for the user.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }

      #file-input {
        color: transparent;
      }

      input[type='file']::after {
        content: 'Pick an image file';
        color: black;
        margin-right: 30px;
      }
    </style>
  </head>

  <body>
    <input type="file" id="file-input" name="file-input" />

    <script src="index.js"></script>
  </body>
</html>

set text of input to transparent

The code for this article is available on GitHub

You might have to play around with the value of the margin to adjust the ::after text.

Alternatively, you can remove the ::after style altogether.

If you want to display the text on the left side of the file input, use the before:: pseudo-selector.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }

      #file-input {
        color: transparent;
      }

      input[type='file']::before {
        content: 'Pick an image file';
        color: black;
        margin-right: 10px;
      }
    </style>
  </head>

  <body>
    <input type="file" id="file-input" name="file-input" />

    <script src="index.js"></script>
  </body>
</html>

using before pseudo selector instead

# Change/Remove "No file Chosen" text of input type "file" with JavaScript

An alternative approach is to use a few lines of JavaScript to change or remove the "No file chosen" text of an input type "file".

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }

      #file-input {
        width: 90px;
        color: transparent;
      }
    </style>
  </head>

  <body>
    <input type="file" id="file-input" name="file-input" />

    <label id="file-input-label" for="file-input"
      >Select a file</label
    >

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const fileInput = document.getElementById('file-input');

const fileInputLabel = document.getElementById(
  'file-input-label',
);

fileInput.addEventListener('change', () => {
  if (fileInput.value === '') {
    fileInputLabel.innerHTML = 'Select a file';
  } else {
    const realPathArray = fileInput.value.split('\\');

    fileInputLabel.innerHTML =
      realPathArray[realPathArray.length - 1];
  }
});

change remove no file chosen input text using js

We first set the width of the file input to 90px and set its color to transparent to hide the "No file chosen" text.

style.css

Copied!
#file-input {
  width: 90px;
  color: transparent;
}

We used the document.getElementById method to select the file input element and its label by their id attributes.

The next step is to add a change event listener to the file input element.

index.js

Copied!
fileInput.addEventListener('change', () => {
  if (fileInput.value === '') {
    fileInputLabel.innerHTML = 'Select a file';
  } else {
    const realPathArray = fileInput.value.split('\\');

    fileInputLabel.innerHTML =
      realPathArray[realPathArray.length - 1];
  }
});

The code for this article is available on GitHub

If the user doesn't select a file, we display the "Select a file" text, otherwise, the file's name is displayed.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Change/Remove "No file Chosen" text of input type "file"

# Table of Contents

# Change/Remove "No file Chosen" text of input type "file"

# Removing the "no file chosen" text by setting overflow to hidden

# Change/Remove "No file Chosen" text of input type "file" with JavaScript

# Additional Resources

Borislav Hadzhiev

# Removing the "no file chosen" text by setting `overflow` to `hidden`