placeholder for selecting a file

I'm struggling to replace "no file chosen" with "cv" on the file input field. I tried adding a placeholder, but it didn't work as expected.

https://i.sstatic.net/wQqcS.png

        <div class="col-md-6 form-group ">
        
          <input type="file" class="col form-control text-field-box mt-3" name="cv" id="files" placeholder="CV" accept="application/pdf" required />
          <label class="ml-3 "
          style="font-size: 13px;position: absolute;top: 0px;
          font-family: 'Roboto', sans-serif;font-weight: 300;">CV</label>

        </div>
htmlcssbootstrap-4

Answer №1

If you have any questions about my code, please review it carefully and let me know. :)

I hope this information proves helpful to you.

.file-wrapper .col.form-control{
height: 20px;
background: transparent;
border: 0;
position: absolute;
left: 0;
opacity: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 1;
}

.file-wrapper .ml-3{
font-size: 13px;
position: relative;
top: 0px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
z-index: 0;
}
<div class="col-md-6 form-group file-wrapper">

    <input type="file" class="col form-control text-field-box mt-3" name="cv" id="files" placeholder="CV" accept="application/pdf" required />
    <label class="ml-3 " 
    style="font-size: 13px;position: absolute;top: 0px;
    font-family: 'Roboto', sans-serif;font-weight: 300;">CV</label>

  </div>

Answer №2

One clever method to accomplish this is by concealing the input itself and utilizing the label as a 'fake input' that can be styled according to your preferences. It's essential to assign an id to the input and use the for attribute on the label with the same id value. This setup allows clicking on the label to trigger the input. Subsequently, with some basic JavaScript, you have the capability to modify the content of the label; for instance, displaying a placeholder text when there's no selection and revealing the filename once it's selected.

Here's an example of how to hide the input:

    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0.1px;
    z-index: -1;

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

What could be causing render_template to fail when attempting to update the same parameters more than once?

Lately, I've dived into the world of Flask, MongoDB, and ElasticSearch. So far, my MongoDB and ElasticSearch setups are running smoothly. However, I've encountered an issue with generating a list of dictionaries and displaying them on my HTML we ...

javascriptpythonhtmlflask

I'm wondering why my .focus() function is causing the cursor to move to the start of my contenteditable div?

I am currently developing a website for writing books, primarily using php. I have implemented a jQuery function that, upon clicking the "New Chapter" button, triggers an AJAX function along with various other JS/jQuery events. One of these events is inten ...

javascripthtmljquery

Does Courier New font have any downsides?

Is it possible to highlight text in a flex textarea using htmlText when certain font tags are not supported? I am looking for a font that is the opposite of Courier New so that when embedded in Flash and written with a specific color, I can achieve a hig ...

htmlapache-flexfontshtmltext

Can a drop shadow be achieved using only CSS3 without any additional tools or techniques?

Our designers love fancy drop shadows, but I prefer to avoid using image sprites. I am determined to create this effect using only CSS3. However, it's proving to be a challenge to replicate it perfectly with CSS3 alone: This is my attempt so far, but ...

css

Obtain the script's event feedback from the WebView and transfer it to React Native

My HTML script is used to display a module, but I encountered an issue with the eventHandler not responding. How can I ensure that the eventHandler in Web View triggers responses? I am not receiving any logs for the onSuccess, onError, or onClose methods w ...

htmlreactjsreact-nativewebview

What is the process for updating the source in an input box?

How can I use JavaScript to update the src value of an iframe based on input? <input class="url" id="url1" type="url" value="youtube url"> <input onclick="changevideo()" class="add-video" id="add-video1" type="submit" value="add to play ...

javascripthtmlcss

Navigating with AngularJS

My server is utilizing angular for routing purposes. It sends a HTML file containing a js file with routing using angular js to the browser. Here is the server code (which sends the check.html with the routing file main.js) : var express = require("expre ...

javascriptjqueryhtmlangularjsnode.js

To retrieve the value of a specific row within a table and remove that row

I have utilized handlebars to display a table with data, each row containing an edit button. I am unsure how to retrieve the specific values from the row when the edit button in clicked. Here is the HTML code: <table class="table table-bordered"& ...

htmlbackbone.jshandlebars.js

Confirming user credentials for every page

I am currently working with an HTML page that includes front end PHP for server side scripting. One issue I have encountered is the configuration page, which can be accessed by disabling JavaScript in Mozilla settings. My current validation method relies ...

phpjavascripthtml

Styling the <Autocomplete/> component in Material UI with React to achieve rounded corners

Google's search bar has always been a favorite of mine, with its rounded corners and generous text padding. https://i.stack.imgur.com/UbKrr.png I'm attempting to replicate this aesthetic using Material UI's <Autocomplete/> component ...

javascriptcssreactjsnext.jsmaterial-ui

Record details to text file after the button is clicked on ASP.NET

My goal is to save an integer value (incremented each time a button is pressed) into a .txt file for each individual. However, I am struggling with how to store the value of each person's button click. I have a method in mind, but I need assistance wi ...

javascriptjqueryhtmlasp.net

Tips on creating a transition in React to showcase fresh HTML content depending on the recent state changes

I am completely new to React and recently completed a project called Random Quote Machine. The main objective was to have a method triggered inside React when the user clicks a button, changing the state value and re-rendering to display a new quote on the ...

javascripthtmlreactjs

Creating Dynamic Website Titles with PHP and HTML

I am currently teaching myself web development and using the W3 validator to check my code. I have a document that loads like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Conten ...

phphtmltitlehead

Tips on aligning text link to the right within li using CSS

I am looking to adjust the position of a text link that is currently aligned to the left inside an li element, by moving it slightly to the right. Is there a way to achieve this effect without changing the overall layout? Page link: CSS: #secondnav li ...

csshtml-listspositioningtext-align

The responsiveness issue with the Bootstrap button menu in my Django project is causing functionality problems

I am currently working on a Django project and have set up a static folder in my "accueil" application. However, when I resize the browser window, the button to show the menu does not function as expected. The template I downloaded for free is not working ...

djangohtmltwitter-bootstrapcss

Check the radio box corresponding to the adjacent label

As a hobby, I have been exploring ways to automate questionnaires that I used to manually deal with for years. It has always intrigued me how best to streamline this process, and now I am taking the opportunity to indulge in my passion and enhance my JavaS ...

javascripthtmlautomationradio-button

Challenges with resizing images in SVG using D3

I have an SVG image created using d3. I am facing an issue where the svg is extending beyond its parent div container. Here is the code snippet: <div id="test" style="{width: 500px; height:500px;}"> <svg></svg> </div> ...

javascriptjqueryhtmld3.jssvg

Divide the output results into two equal horizontal sections within the same HTML table

Is there a way to dynamically split the output of a specific result into two horizontal sections that fit within the browser width? The number of rows returned from the service is variable, so a fixed solution won't work. I also want to avoid manually ...

javascripthtmlcssangularjshtml-table

React random marker position shifts when the screen size is adjusted

After displaying an image and adding a marker to it, I noticed that the marker's position changes when the screen size is adjusted. Why does this happen? And more importantly, how can I ensure that the marker stays in the same position relative to the ...

csshtmlimagereactjsposition

What is the best way to reach the assets/public directory from a routed page in Meteor?

I am currently developing a multipage application using Meteor and am facing an issue accessing public assets from a routed page. For instance, when I go to the route http://localhost:3000/editor, I would like to be able to utilize an image from public/im ...

htmlmeteoriron-router