Customizing CSS input file for Firefox (also compatible with Chrome)

Currently, I am developing an upload page that does not allow the use of jquery and bootstrap. For Chrome, I have implemented the following CSS code to address my issue:

.btn-file-upload{
    width: 200px;
    position:relative;
    height: 40px;
}

.btn-file-upload:after{
   content:  attr(value);
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;    
   width: 99%;
   background: white;
   color: black;
   border:1px solid rgb(0, 0, 126);
   border-radius: 2px;
   text-align: center;
   font-size: 12px;
   line-height: 1.7;
   overflow: visible;
}


<input type="file" name="theFile" size="60" value="label" onkeypress="javascript:return false;" onchange="changeFileName()" class="btn-file-upload">

I am looking for a way to ensure this solution works seamlessly on Firefox without affecting the Chrome version. Additionally, is there a method to enable drag and drop functionality for the input file on Internet Explorer?

htmlcssfileinputupload

Answer №1

After numerous hours of experimentation, I have finally discovered a viable solution to the issue at hand.

Initially, I made modifications to the CSS without incorporating the 'after' element.

.btn-file-upload{
   position: relative;
   top: 0;
   left: 0;
   bottom: 0;
   width: 200px;
   background: white;
   color: black;
   border: 1px solid rgb(0, 0, 126);
   border-radius: 2px;
   text-align: center;
   font-size: 12px;
   line-height: 1.7;
   overflow: visible;
   height: 40px;
}

Next, I opted for using a combination of button and input rather than solely input in order to customize the message.

<button id="inputdrop" onclick="return document.getElementById('getFile').click();return false;" onkeypress="javascript:return false;"  class="btn-file-upload">Label</button>
<input size='60' style='width: 187px;display:none' type='file' name="theFile" id="getFile" onchange="changeFileName()">
<span id="filename" class="Testo">No file selected</span>

Finally, with the assistance of JavaScript, I enabled drag-and-drop functionality (while ensuring that changefilename function was working as intended).

function changeFileName(){
    document.getElementById("filename").innerText = code to get file name in struts;
}

// Additional code for onload event
document.getElementById("inputdrop").ondragover = document.getElementById("inputdrop").ondragenter = function(evt) {
    evt.preventDefault();
};

document.getElementById("inputdrop").ondrop = function(evt) {
  document.getElementById("getFile").files = evt.dataTransfer.files;
  changeFileName();
  evt.preventDefault();
};

The sole drawback is that this feature does not operate on Internet Explorer or the older version of Edge. Nonetheless, it functions effectively on Chrome, Firefox, and the latest version of Edge.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Placing a div with 100% height inside a table-cell div in Firefox and IE

Seeking guidance on placing a div with 100% height inside a table-cell div. Attempted giving display:inline-block; width:100%;height:100%; to the div, successful in Chrome but facing issues in Mozilla and IE. Fiddle link: http://jsfiddle.net/kQM74/2/ HTM ...

htmlcssinternet-explorerfirefox

Starting Web Server using File (file://) protocol

I'm currently using Quasar to develop a Vue SPA web app/page. For this project, the web app will only run by clicking on the index.html file generated by the Quasar packager. This package will not be distributed online or hosted on any domain. My mai ...

javascripthtmlnode.jsvue.jsquasar-framework

Retrieving information from the table based on the user currently logged in

I have a scenario with two different tables, NGO and Volunteer. When a volunteer selects an NGO to work with, I want to display only those volunteers who are interested in the current logged-in NGO. Below is the code snippet I am using: [<?php ...

phphtmlcssmysqlmaterialize

What are the top recommendations for implementing typography in SCSS?

As I ponder the best approach to take, I find myself torn between two options and wondering what the 'best practice' in this situation might be. My objective is to implement a selector that removes the standard global margin of 20px that I have ...

csssasslesstypographycss-specificity

Tips for adjusting the offset dimensions in Bootstrap 4 grid systems

Incorporating Bootstrap 4 into my Angular 8 application, I am faced with an issue on the main page where I have two components sized md-5 and md-6, respectively. To create a gap between them, I used offset-md-1. However, the offset size is too large, res ...

htmlcssbootstrap-4frontendangular-ui-bootstrap

Is there a way to determine the quantity of items within a sortable div?

In my HTML document, there are multiple divs containing smaller divs that can be rearranged within each other. Upon loading the document, a random assortment of these smaller divs are added to #boxtop. Below is a snippet of my HTML code: <html> &l ...

javascriptjqueryhtmlcssjquery-ui-sortable

Can you trigger a button click on one HTML page from another HTML page?

I am working on a project with two custom HTML pages: 'first.html' and 'second.html'. In 'second.html', there is a hidden div that I want to unhide when a button on 'first.html' is clicked. Both pages should be open ...

javascriptjqueryhtmldjangoweb

Change the z-index of divs when clicked

When a button is clicked, I want to iterate through a group of absolutely positioned children divs with varying z-indexes. The goal is for the z-index of the currently visible div to decrease on each click, creating a looping effect where only one div is v ...

javascriptjquerycss

Submitting a Django POST request with an empty form in an HTML form

When I try to submit a simple HTML form, both request.body and request.POST are empty for some unknown reason. The HTML code for the form is as follows: <div id="signup"> <h1>Sign Up for Free</h1> <form action="/accounts ...

htmldjangoformsdjango-rest-framework

Creating an object positioned to the right side of a div (div:right) is a matter of using CSS positioning properties

While we are familiar with pseudo-classes like :before and :after, have you ever wondered why there is no nav ul li a:left or :right? Do you think it's achievable? I'm open to using HTML5, CSS3, and JavaScript to make it happen. ...

javascripthtmlcss

Troubleshooting: Why Is My Bootstrap 5 Mobile Navigation Bar Not Expanding

As I embark on creating my very first webpage, I wanted to incorporate a responsive navigation bar using Bootstrap 5. Initially, everything was working perfectly until suddenly, the navigation bar stopped functioning properly. While it functions as intende ...

htmlcssnavbarbootstrap-5

Adjustable Text Size with HTML5 and CSS3

Looking to enhance the accessibility of a website by implementing text size adjustment buttons ' A A A ' using just HTML5 and CSS3. Avoiding the use of jQuery or Javascript for this task. Inspiration drawn from this link. Appreciate any assistan ...

htmlcss

Tips for stopping the web page from moving due to scrollbar placement?

On my website, I have DIVs that are center-aligned. However, some pages require scrolling while others don't. Whenever I switch between these two types of pages, the appearance of a scrollbar causes the page to move slightly to the side. Is there a wa ...

htmlcss

"Refresh the visuals on canvas by updating images using the file input type in j

Check out jCanvas, a jQuery plugin that I'm using to create a flyer editor: $(function () { initCanvas(); // code for datepicker in French goes here... $('form').on('keyup change paste', 'input, select, textarea&a ...

javascripthtmljquerycanvasjcanvas

Display a selection of diverse swf banners within an HTML format

I am looking to display two flash banners (.swf) randomly on page refresh. While I have successfully accomplished this with image files using javascript, I am facing some challenges with flash banners. Here is an example of how I can achieve this with ima ...

javascriptjqueryhtmlrandombanner

What is the best way to create a triangle shape that is responsive to elements?

I'm trying to make a background shape with a triangle inclusion using CSS. I want it to be responsive to all screen sizes, but I'm having some trouble. Any tips on how to achieve this? header { width: 100%; height:150px; background: #eee; } m ...

htmlcssresponsive-design

Twists and turns as I mix up Kineticjs

After scrambling my puzzle, I now need it to be rotated. Can anyone help me with this? Thanks :) fillPatternImage:imageObj, x:-pieceWidth*i/2, y:-pieceHeight*j/2, stroke: "#000000", ...

javascripthtmlrotationkineticjs

Achieving text alignment with icons in Angular

I'm having trouble aligning my text with the icon next to it despite trying to adjust margins. I would really appreciate any help or suggestions on how to resolve this issue. <div class="notification" [ngClass]="{'no ...

htmlcssangularformstext

Tips for using JQuery to remove a targeted sessionStorage item

I am curious about how to delete a specific sessionStorage value using JQuery. I have managed to delete input fields, but deleting the sessionStorage values has proven to be a challenge. Below is my code snippet. Here is the link to my jsfiddle: https://j ...

jqueryhtmlsession-storagesessionstorage

Incorporating a partial view within a view through AJAX requests

I am attempting to update a partial view within a view upon form submission, but I am facing issues where the partial view renders as a normal view instead. Can anyone help me identify the mistake in my code? Controller: public ActionResult ChangeHeatNam ...

c#htmlajaxasp.net-mvc