Greetings everyone, I have encountered a dilemma :
<input type ="file" name ="fileUpload">
I created a file input that shows "choose a file" by default. I'm not too fond of it and would like to make it look more like a button. However, when I try to enclose it in a Button tag or span with a Button property
I am wondering if there is a way to hide the "choose a file" text and make the file input function like a single button.
Thank you for your assistance Wishing you a pleasant day Luca
<style>
.customUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.uploadButton {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
<div class="customUpload">
<span>Choose File</span>
<input type="file" class="uploadButton" />
</div>
To achieve a white color effect, you can simply enclose it in a span element and apply the color:white CSS property to the span. Take a look at this example for a better understanding: http://jsfiddle.net/25bju0a4/
<style type="text/css">
.button {
width: 124px;
height: 27px;
}
.button::-webkit-file-upload-button {
visibility: hidden;
}
.button:before {
content: 'Choose files to upload';
display: inline-block;
background: -webkit-linear-gradient(top, #F9F9F9, #E3E3E3);
background: -moz-linear-gradient(top, #F9F9F9, #E3E3E3);
background: -ms-linear-gradient(top, #F9F9F9, #E3E3E3);
background: -o-linear-gradient(top, #F9F9F9, #E3E3E3);
background: linear-gradient(top, #F9F9F9, #E3E3E3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.button:hover:before {
border-color: black;
}
.button:active:before {
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#E3E3E3), to(#F9F9F9));
background: -webkit-linear-gradient(top, #E3E3E3, #F9F9F9);
background: -moz-linear-gradient(top, #E3E3E3, #F9F9F9);
background: -ms-linear-gradient(top, #E3E3E3, #F9F9F9);
background: -o-linear-gradient(top, #E3E3E3, #F9F9F9);
background: linear-gradient(top, #E3E3E3, #F9F9F9);
}
</style><input type ="file" name ="fileUpload" class=button>.middle-site-content-container { width: auto; height: auto; border: 2px red solid; display: flex; /*Le pot pozitiona in line*/ flex-wrap: wrap; justify-content: center; flex-direction: row; margin: auto; } .middle-site-content-1, .middle ...
I am currently working on creating a form for a client who has requested a map of the city to allow visitors to visually select their location. They want this feature to link to the City Dropdown/Select area of the form. Here is a link to the client' ...
In my coding project, there is an array named products that follows this specific structure: { "_id": "150", "name": "Milk", "description": "Skimmed", "price": "10", "ratings": [ ...
Using jQuery, I am manipulating the display of an <a> element. Depending on certain keypress events, it adds or removes a class from an <input> element (which controls the display) that is related as a sibling to the mentioned <a>. The i ...
I'm experimenting with a zoom in animation on a background image for a brief moment. It seems to work initially but then resets itself. To see an example, I've created a jsfiddle link: https://jsfiddle.net/onlinesolution/tk6rcLdx/ Any idea what ...
Recently, a marketing firm provided me with a custom tag to implement on a Wordpress site for tracking clicks on specific buttons. I am utilizing the Elementor page builder and have assigned unique IDs to each button. Although I am new to Google Tag Manage ...
I am currently working on a PHP page and my goal is to add the extension ?id=variable_value to its URL when I click on a specific div. However, whenever I try to do this, it shows me an error message stating that the URL with the extension is undefined. B ...
In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs ...
I came across Ian Lunn's Parallax tutorial and found it really interesting. The tutorial can be accessed at . My goal is to enhance the effect by not only changing the y-position of the background but also adding horizontal movement based on scroll in ...
Seeking assistance with JavaScript to enable changing thumbnails on hover. As a newcomer to JavaScript, I'm struggling to grasp how to achieve this effect. I've already implemented fancybox for gallery functionality. Below is the HTML and CSS f ...
I need a div element to be displayed as a "scroll back to top" button on my webpage when the user has scrolled past a certain point. To achieve this, I am using the JavaScript code provided below: $(document).ready(function() { $(window).scroll(functio ...
Scenario In my React Router setup, most pages include their own .css files along with the default antd (UI framework) stylesheet: import '../styles.css'; This ensures that all components inherit these styles automatically. Issue at Hand Now, I ...
Having a list of over 20 items, I utilized the :nth-child(2n+1) selector to alternate the background color (even item in black, odd item in white). However, when using the jQuery Isotope plugin to filter out specific items by adding a .isotope-hidden class ...
Can a website be created to detect textbox text upon longClick by the user, and function across various browsers? The site should also have mobile compatibility. Appreciate any help! ...
As a newcomer to JavaScript and JQuery, I am facing a challenge that I couldn't find a solution for in other discussions: I have a function that retrieves the path to an image (/API/currentImage) using a GET request and needs to update the src attrib ...
Can a locally stored database be developed using MVC framework principles in javascript and html5? Thank you Ravindran ...
Today while working on a website, I encountered something strange. In the footer section of the site, there is a quick contact form. However, I noticed that in Firefox, I am unable to focus on the email field. Surprisingly, this issue does not occur in Chr ...
I'm fairly new to web design, specifically dealing with html and css, and I'm attempting to create something similar to the design in the following image: My struggle lies in centering the fa-envelope-o icon both horizontally and vertically. I&a ...
Whenever I hover over my icon, the font size increases causing the div to expand slightly and move the page. This doesn't look great. How can I prevent the div from resizing when hovering over the icon? Here's my code: <div className="bg- ...
.rq-search-container { position: relative; width: 100%; background: white; display: flex; flex-direction: row; align-items: flex-start; border-radius: 2px; z-index: 30; -webkit-flex: 1 0 15em; } While this code functi ...