To customize the tooltip, you can modify the title attribute

<input type='file' title="customize your text" />

If you want to remove the tooltip completely

<input type='file' title="" />

Simply removing the title attribute doesn't always work. Here's a handy workaround: add a space in the title attribute. It should do the trick! :)

<input type='file' title=" " />

My intention was to make the text disappear while still utilizing the default browser button.

input[type='file'] {
  color: transparent;
}

Although undefined made great suggestions, my specific situation called for a different approach. Hopefully this solution can benefit others facing similar challenges.

It was surprisingly simple to fix the issue with CSS targeting the input["type"] method. It just wasn't working for me, but I found a solution right in my HTML code.

<input type="file" style="color:transparent; width:70px;"/>

And just like that, problem solved!

One simple solution I discovered is to insert an empty string into the title attribute.

<input type="file" value="" title=" " />

To remove the tooltip, set a title attribute with a space for webkit browsers such as Chrome, and an empty string for Firefox or IE (confirmed on Chrome 35, FF 29, IE 11, Safari mobile).

$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');

It seems like many of the answers provided are unnecessarily complex or just plain incorrect.

Here's a simple solution:

<div>
    <input type="file" />
    <button>Select File</button>
</div>

With this HTML structure and CSS styling, you can achieve the desired functionality:

input {
    display: none;
}

And using this straightforward JavaScript snippet:

$('button').on('click', function(){
   $('input').trigger('click'); 
});

Check out this simplified approach in action on this JSFiddle link.

I've tested this method on various browsers including IE 9, Firefox, and Chrome, and it works perfectly fine. It's a clean and easy way to handle file selection without unnecessary complexity.

Here is a solution that has been successful for me (tested on Chrome and Firefox):

<input type="file" accept="image/*" title="&nbsp;"/>

This particular task posed a challenge for me. I struggled to target the 'no file chosen' element, so I came up with a workaround by creating a mask using the :after pseudo selector.

In order to style the button, my solution involves utilizing the following pseudo selector:

::-webkit-file-upload-button

Give this a try: http://jsfiddle.net/J8Wfx/1/

Just a heads up: This approach is specifically designed for webkit browsers.

P.S. If anyone happens to know how to access webkit pseudo selectors like the one mentioned above in the webkit inspector, please share your insights with me.

Easy solution that worked across all browsers for me.

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})

input[type="file"]{
    color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">

Cover the input with a label to hide it from view. Functionality tested in Chrome, Safari & Firefox.

label { 
  padding: 5px;
  background: silver;
}
label > input[type=file] {
    display: none;
}

<label>
  <input type="file">
  select file
</label>

Success - it's functional!

input[type="file"]{
  font-size: 0px;
}

From here, feel free to experiment with various styles like width, height and more to personalize your file input.

To accomplish this, significant customization of the control will be necessary.

For detailed instructions, refer to: https://www.example.com/customize-input-control

When you set the opacity to zero, the tooltip may still be visible. A solution that worked for me was using visibility:hidden on the element instead.

Avoiding unnecessary javascript is recommended for enhancing website performance. You can utilize the label tag to increase the clickable area of an input element, as shown below:

<label>
  <input type="text" style="visibility: hidden;">
  <span>Click Here</span>
</label>

Even though the input is not visible, the span acts as a clickable target for it, allowing for custom styling.

Interesting that no one has brought up the use of event.preventDefault()

$("input[type=file]").mouseover(function(event) {
    event.preventDefault();
    // By using this code, we can prevent the default browser behavior
 });

Why not experiment with -webkit-appearance:? It could be worth giving it a shot.

http://css-tricks.com/understanding-webkit-appearance

I trust this information will be useful :)

Modifying the appearance of input[type=file] directly is limited.

To hide input type file, set opacity to 0 and try overlaying it with a relative element [div/span/button] using custom CSS

Check out this example: http://jsfiddle.net/uniqueusername/example123/

style="color: transparent; width:110px"

This method proved to be successful for me in the following way:

<textarea class="text-lg"
       type="text"
       style="color: transparent; width:110px"
       ng2TextareaInsert
       [handler]="handler"
       multiple />

To display only the button and hide the "no file chosen" text, simply set a specific width for your element.

After searching for a solution, I stumbled upon this helpful tip:

To start, remove the default 'no file chosen' text

input[type="file"]{
font-size: 0px;
}

Next, style the button with the -webkit-file-upload-button property like so:

input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}

I hope this addresses your issue, as it worked perfectly for me.

After evaluating various recommendations mentioned earlier, I implemented the following solution using jQuery:

input[type='file'].hidden {
  color: transparent;
}

Additionally:

$(function() {
  $("input[type='file'].hidden").click( function() {$(this).removeClass('hidden')});
};

Make sure to assign the "hidden" class to your file inputs. This method is straightforward and quite effective.

In my opinion, the most effective approach is to enclose the input [type="file"] in a container and incorporate some jQuery code:

$(function(){
function displayImage(input){
        if (input.files && input.files[0]){
            var reader = new FileReader();
            
            reader.onload = function (e){
                $('#uploadImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image").change(function(){
        displayImage(this);
    });
});

#image{
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 75px;
height: 35px;
}
#uploadImage{
position: relative;
top: 30px;
left: 70px;
}
.button{
position: relative;
width: 75px;
height: 35px;
border: 1px solid #000;
border-radius: 5px;
font-size: 1.5em;
text-align: center;
line-height: 34px;
}

<form action="#" method="post" id="form">
<div class="button">
Upload <input type="file" id="image" />
     </div>
     <img id="uploadImage" src="#" alt="your image" width="350" height="300" />
 </form>

After struggling with a page alignment issue caused by the pesky "No file chosen" text and extra space that followed, I devised a clever solution to remove it entirely. In Chrome, it appeared as "No file chosen ", but I was determined to fix it.

I found that setting the width of the input tag to match the button's width effectively got rid of the unwanted text and spacing. However, since browsers vary in how they interpret button size (Firefox tends to make it slightly smaller), I also made sure to set the color of the text to match the background color of the page itself. This prevented any remnants of the text from showing through. Here's an example of how my input file tag looks now:

<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">

It may seem like a workaround, but all I needed to do was make the color transparent in the stylesheet - it would look like this inline: style="color:transparent;".

To effectively conceal the tooltip, consider implementing the following techniques:

1. Adjust the text color on the input field using color: white; to blend with the background or choose a suitable contrasting color.

2. If there are other adjacent elements, apply position: absolute; to position them above the tooltip while ensuring the visibility of necessary components like buttons.

If the top 3 solutions didn't work for you, try this alternative method:

Start by creating an input element:

<input type='file' name='file' id='file' />

Next, hide the input element using its Id and set a style that makes it invisible:

#file{ color: #ffffff; width: 0px; }

Then, create a new button in front of the original input element. Add an onclick function to trigger JavaScript that will click the original input:

<button onclick='clicker()'>BROWSE</button><input type='file' name='file' id='file' /> 
// The new button will be visible but not the original input:

JavaScript:

function clicker(){ document.getElementById('file').click(); }

FINAL OUTPUT:

function clicker(){
document.getElementById('file').click();
}

#file{
  color: #ffffff;
  width: 0px;
}

<html>
<head>
</head>
<body>
FILE: <button onclick='clicker()'>BROWSE</button><input type='file' id='file'/>
<br>

</body>
</html>

To avoid removing the tooltip, adjust the file input capacity to zero. Create a div box positioned above it with absolute positioning so that clicking on the div will trigger the file input.

<div class="file_cover">Click to upload file</div>
<input type="file">

input[type='file'] {
  opacity: 0;
}
.file_cover {
  position: absolute;
  top: 0;
}

I have discovered a brilliant solution for this issue

All you need to do is include a label and link it to the input element

<label for="photo__input">Select a photo</label>
<input type="file" id="photo__input"/>

The label will inherit the functionality of the input element automatically

To hide the input element, simply apply the following CSS

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

Now you can style the label according to your preferences

Plain JavaScript:

Use vanilla JS to select the file input element and set its title attribute to an empty string:
document.querySelector("input[type=file]").setAttribute("title", "");