Style input type text

Question

I want to style my input field which has type=file. I have attached a link for reference, i want it to have placeholder and that should be replaced by file name which i select. The Reference site link https://test4.glod.at/dashboard/artist.html

enter image description here what you should look for in the website link

Thanks in advance

Here is an existing answer https://stackoverflow.com/questions/12368910/html-display-image-after-selecting-filename — Twak, Nov 10 '20 at 18:25
Hello and Welcome to SO. SO is neither a forum nor a personal help site. All content must be considered valuable for the entire community. As such, you should ALWAYS provide a minimal reproducable code snippet. A link to your website not a picture of your code is an acceptable alternative as the links to that content might change or be deleted. — tacoshy, Nov 10 '20 at 18:31

Saadi Toumi Fouad · Accepted Answer · 2020-11-10T21:44:30.963

Here is a working example, I have taken the css and html from your given website, and just added some JS to handle the onchange event

document.querySelector("input[name='file-upload-field']").onchange = function() {
  // show the file name if the user selects a file otherwise show the string "Your file"
  this.parentElement.setAttribute("data-text", this.files.length > 0 && this.files[0].name || "Your file");
};

.file-upload-wrapper {
  position: relative;
  width: 100%;
  height: 40px;
}
.file-upload-wrapper:after {
  content: attr(data-text);
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 0;
  background: #151515;
  padding: 10px 15px;
  display: block;
  width: calc(100% - 40px);
  pointer-events: none;
  z-index: 20;
  height: 20px;
  line-height: 20px;
  color: #757575;
  border-radius: 1px;
  transition: background-color 0.2s ease;
}
.file-upload-wrapper:hover:after
{
  background: #202020;
}
.file-upload-wrapper:before {
  content: 'Upload';
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  height: 40px;
  background: #78FFFF;
  color: #000;
  font-weight: 500;
  z-index: 25;
  line-height: 40px;
  padding: 0 18px;
  text-transform: uppercase;
  pointer-events: none;
  border-radius: 0 1px 1px 0;
}
.file-upload-wrapper input {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  height: 40px;
  margin: 0;
  padding: 0;
  display: block;
  cursor: pointer;
  width: 100%;
}

<div class="file-upload-wrapper" data-text="Your file">
  <input name="file-upload-field" type="file" class="file-upload-field" value="">
</div>

score 0 · Answer 2 · answered Nov 10 '20 at 18:44

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

You can hide the input and style the label using CSS easily. And to change the content use JS to change the label.

I found this from another thread.this one

Not sure if this answers your query but at least I tried :))

Style input type text

2 Answers2