Style file button css

Styling Input type=»file» button using CSS & Bootstrap

There can be situtations in which you may need to style your button, so here i am going to explain few techniques to achieve this using CSS, Bootstrap and jQuery/javascript, there are already many many ways on the internet to achieve this, but we will discuss some basics and easy ways to complete it with cross browser support.

Cross browser solution to style input type=’file’ using pure CSS (No javascript)

Here is the source for this, HTML

Hide the main input file type using CSS and give button css to custome button

input[type="file"] < display: none; >.custom-file-upload

But the draw back of the above solution is you don’t get the name of the file which is added,so let try another approach for this

Styling Input type file button using CSS and Javascript

In this approach, we will also implement javascript to get the file name on file input change, so here is the quick code for it.

CSS to hide the actual input and make it as a button

.fileUpload < position: relative; overflow: hidden; margin: 10px; >.fileUpload input.upload

and the javascript to show file name on input type file change

document.getElementById("uploadBtn").onchange = function () < document.getElementById("uploadFile").value = this.value; >;

The output of the above code will be as below

Here is the working fiddle sample

Please Note: I am also using Bootstrap.min.css to apply styling to button

Using Bootstrap/jQuery to style file input button

Now let’s use the bootstrap way make it look better and provide you file name using jquery code, so here is the code for it.

HTML code below uses bootstrap classes to create a input group which has input type=’file’ but hidden and then it also creates html with input type=’text’ to show the browsed file names.

For the above HTML, we don’t need any custom CSS, as all the styling part is already done using Bootstrap and we have made the input type=»file» hidden using inline-css.

So, here is the jQuery part to get file name and append it in text control.

$(function() < // This code will attach `fileselect` event to all file inputs on the page $(document).on('change', ':file', function() < var input = $(this), numFiles = input.get(0).files ? input.get(0).files.length : 1, label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); input.trigger('fileselect', [numFiles, label]); >); $(document).ready( function() < //below code executes on file input change and append name in text control $(':file').on('fileselect', function(event, numFiles, label) < var input = $(this).parents('.input-group').find(':text'), log = numFiles >1 ? numFiles + ' files selected' : label; if( input.length ) < input.val(log); >else < if( log ) alert(log); >>); >); >);

Executing the above code and selecting any file, will give your output as below

Here is the working fiddle sample:

The above method works well in IE9 and above and in recent versions of Chrome, Safari, Firefox, and Opera.

Style input using Bootstrap and Pure Javascript (No jQuery)

Since, many developers are moving to pure javascript instead of using jQuery framework, so let’s try to make above solution work with Bootstrap and Javascript only.

I am still using Bootstrap 3 for this example, but you can use latest version, and update CSS classes based on that.

So here is the HTML for that

and Javascript to trigger event on file select would be like this

const fileInput = document.getElementById('file'); fileInput.onchange = () =>

That’s it, output design will be same as jQuery based solution.

You can try it using Fiddle also

Источник

Custom styled input type file upload button with pure CSS

In this guide I’ll show you how to create a stylish and user friendly file upload button with pure CSS and HTML.

Markup

To upload files you’ll need to use the input tag with type=»file» attribute. Additionally you can specify which file types you’re allowing to upload via accept attribute.

This markup produces a button with a Choose file title followed by a text which indicates the file name when selected. By default it is No file chosen.

Input with type file default look differs on different browsers:

Styling

The upload file widget structure consists of a block that displays a button and a file name. A user can click anywhere inside the block or drag a file from the desktop and it will open up the upload window.

Styling the upload file block

If you apply styles for the input[type=file] selector it will set them for the whole widget block, that is the button and text.

input[type=file]  width: 350px; max-width: 100%; color: #444; padding: 5px; background: #fff; border-radius: 10px; border: 1px solid #555; > 

The result already looks much better as it indicates the zone where user is able to click or drag the file.

Styling the upload file button

By default, the Choose file button has a plain user-agent style. To style the button with CSS you should use the ::file-selector-button pseudo-element to select it. It is supported in all modern browsers.

input[type=file]::file-selector-button  margin-right: 20px; border: none; background: #084cdf; padding: 10px 20px; border-radius: 10px; color: #fff; cursor: pointer; transition: background .2s ease-in-out; > input[type=file]::file-selector-button:hover  background: #0d45a5; > 

Styling the the click/drop zone

If you wich to go a bit further, you can create a large zone where user can click and drag files. This large zone will make it easier for people to use the widget, as it don’t require to be that precise when dragging a file, especially on smaller screens.

To implement a large drop zone, you’ll need to wrap your file upload input into a label tag and specify a description text that will let users know how to use the widget.

 for="images" class="drop-container" id="dropcontainer">  class="drop-title">Drop files here or  type="file" id="images" accept="image/*" required>  

For the layout, we need to set display to flex with flex related properties for positioning. The height and padding properties for proportion. And finally add some fancy styles like border and hover effects to highlight the file upload zone and you’re ready to go.

.drop-container  position: relative; display: flex; gap: 10px; flex-direction: column; justify-content: center; align-items: center; height: 200px; padding: 20px; border-radius: 10px; border: 2px dashed #555; color: #444; cursor: pointer; transition: background .2s ease-in-out, border .2s ease-in-out; > .drop-container:hover  background: #eee; border-color: #111; > .drop-container:hover .drop-title  color: #222; > .drop-title  color: #444; font-size: 20px; font-weight: bold; text-align: center; transition: color .2s ease-in-out; > 

Handling drag and drop events

Additionally, you can handle cases when the user will try to drag the file over the drop area. CSS alone cannot handle such cases, so we can add a little bit of JavaScript.

There are two points to consider to improve UX for the drop field:

1. Indicate the drop area when the user is dragging a file over it
2. Make it possible to drop a file inside the drop area, and not just the input element

To indicate drop area when user is dragging a file over it, we’ll need to use the dragenter and dragleave events. Both on the label tag, since it represents the drop area. For each event we add or remove a CSS class accordingly.

Since user will be dropping to the label tag we also need to set the input value with the file. To do that we need to do 2 things:

1. Set dragover event for the label tag, set e.preventDefault() and pass false as the third parameter for the addEventListener method
2. On drop event, we need to set the input’s files property to the file via fileInput.files = e.dataTransfer.files

 const dropContainer = document.getElementById("dropcontainer") const fileInput = document.getElementById("images") dropContainer.addEventListener("dragover", (e) =>  // prevent default to allow drop e.preventDefault() >, false) dropContainer.addEventListener("dragenter", () =>  dropContainer.classList.add("drag-active") >) dropContainer.addEventListener("dragleave", () =>  dropContainer.classList.remove("drag-active") >) dropContainer.addEventListener("drop", (e) =>  e.preventDefault() dropContainer.classList.remove("drag-active") fileInput.files = e.dataTransfer.files >) 

As for styles, we can use similar styles to :hover state, but this time with a designated class:

.drop-container.drag-active  background: #eee; border-color: #111; > .drop-container.drag-active .drop-title  color: #222; > 

Demo

See the full example on CodePen:

See the Pen Untitled by Nikita Hlopov (@nikitahl) on CodePen.

Источник

Стилизация input file

Примеры изменения вида стандартного поля для загрузки файлов ( input[type=file] ) с помощью CSS и JS.

Стандартный вид

.input-file < position: relative; display: inline-block; >.input-file-btn < position: relative; display: inline-block; cursor: pointer; outline: none; text-decoration: none; font-size: 14px; vertical-align: middle; color: rgb(255 255 255); text-align: center; border-radius: 4px; background-color: #419152; line-height: 22px; height: 40px; padding: 10px 20px; box-sizing: border-box; border: none; margin: 0; transition: background-color 0.2s; >.input-file-text < padding: 0 10px; line-height: 40px; display: inline-block; >.input-file input[type=file] < position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0; >/* Focus */ .input-file input[type=file]:focus + .input-file-btn < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover/active */ .input-file:hover .input-file-btn < background-color: #59be6e; >.input-file:active .input-file-btn < background-color: #2E703A; >/* Disabled */ .input-file input[type=file]:disabled + .input-file-btn

$('.input-file input[type=file]').on('change', function()< let file = this.files[0]; $(this).closest('.input-file').find('.input-file-text').html(file.name); >);

Результат:

Обычная кнопка

.input-file < position: relative; display: inline-block; >.input-file span < position: relative; display: inline-block; cursor: pointer; outline: none; text-decoration: none; font-size: 14px; vertical-align: middle; color: rgb(255 255 255); text-align: center; border-radius: 4px; background-color: #419152; line-height: 22px; height: 40px; padding: 10px 20px; box-sizing: border-box; border: none; margin: 0; transition: background-color 0.2s; >.input-file input[type=file] < position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0; >/* Focus */ .input-file input[type=file]:focus + span < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover/active */ .input-file:hover span < background-color: #59be6e; >.input-file:active span < background-color: #2E703A; >/* Disabled */ .input-file input[type=file]:disabled + span

$('.input-file input[type=file]').on('change', function()< let file = this.files[0]; $(this).next().html(file.name); >);

Результат:

В виде input text

.input-file < position: relative; display: inline-block; >.input-file-text < padding: 0 10px; line-height: 40px; text-align: left; height: 40px; display: block; float: left; box-sizing: border-box; width: 200px; border-radius: 6px 0px 0 6px; border: 1px solid #ddd; >.input-file-btn < position: relative; display: inline-block; cursor: pointer; outline: none; text-decoration: none; font-size: 14px; vertical-align: middle; color: rgb(255 255 255); text-align: center; border-radius: 0 4px 4px 0; background-color: #419152; line-height: 22px; height: 40px; padding: 10px 20px; box-sizing: border-box; border: none; margin: 0; transition: background-color 0.2s; >.input-file input[type=file] < position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0; >/* Focus */ .input-file input[type=file]:focus + .input-file-btn < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover/active */ .input-file:hover .input-file-btn < background-color: #59be6e; >.input-file:active .input-file-btn < background-color: #2E703A; >/* Disabled */ .input-file input[type=file]:disabled + .input-file-btn

$('.input-file input[type=file]').on('change', function()< let file = this.files[0]; $(this).closest('.input-file').find('.input-file-text').html(file.name); >);

Результат:

Input file со списком выбранных файлов

.input-file-row < display: inline-block; >.input-file < position: relative; display: inline-block; >.input-file span < position: relative; display: inline-block; cursor: pointer; outline: none; text-decoration: none; font-size: 14px; vertical-align: middle; color: rgb(255 255 255); text-align: center; border-radius: 4px; background-color: #419152; line-height: 22px; height: 40px; padding: 10px 20px; box-sizing: border-box; border: none; margin: 0; transition: background-color 0.2s; >.input-file input[type=file] < position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0; >/* Focus */ .input-file input[type=file]:focus + span < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover/Active */ .input-file:hover span < background-color: #59be6e; >.input-file:active span < background-color: #2E703A; >/* Disabled */ .input-file input[type=file]:disabled + span < background-color: #eee; >/* Список файлов */ .input-file-list < padding: 10px 0; >.input-file-list-item < margin-bottom: 10px; >.input-file-list-remove

var dt = new DataTransfer(); $('.input-file input[type=file]').on('change', function()< let $files_list = $(this).closest('.input-file').next(); $files_list.empty(); for(var i = 0; i < this.files.length; i++)< let new_file_input = '
' + ''; $files_list.append(new_file_input); dt.items.add(this.files.item(i)); >; this.files = dt.files; >); function removeFilesItem(target) < let name = $(target).prev().text(); let input = $(target).closest('.input-file-row').find('input[type=file]'); $(target).closest('.input-file-list-item').remove(); for(let i = 0; i < dt.items.length; i++)< if(name === dt.items[i].getAsFile().name)< dt.items.remove(i); >> input[0].files = dt.files; >

Результат:

Загрузка изображений с превью

.input-file-row < display: inline-block; >.input-file < position: relative; display: inline-block; >.input-file span < position: relative; display: inline-block; cursor: pointer; outline: none; text-decoration: none; font-size: 14px; vertical-align: middle; color: rgb(255 255 255); text-align: center; border-radius: 4px; background-color: #419152; line-height: 22px; height: 40px; padding: 10px 20px; box-sizing: border-box; border: none; margin: 0; transition: background-color 0.2s; >.input-file input[type=file] < position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0; >/* Focus */ .input-file input[type=file]:focus + span < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover/active */ .input-file:hover span < background-color: #59be6e; >.input-file:active span < background-color: #2E703A; >/* Disabled */ .input-file input[type=file]:disabled + span < background-color: #eee; >/* Список c превью */ .input-file-list < padding: 10px 0; >.input-file-list-item < display: inline-block; margin: 0 15px 15px; width: 150px; vertical-align: top; position: relative; >.input-file-list-item img < width: 150px; >.input-file-list-name < text-align: center; display: block; font-size: 12px; text-overflow: ellipsis; overflow: hidden; >.input-file-list-remove

var dt = new DataTransfer(); $('.input-file input[type=file]').on('change', function()< let $files_list = $(this).closest('.input-file').next(); $files_list.empty(); for(var i = 0; i < this.files.length; i++)< let file = this.files.item(i); dt.items.add(file); let reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function()< let new_file_input = '
' + '' + ''; $files_list.append(new_file_input); > >; this.files = dt.files; >); function removeFilesItem(target) < let name = $(target).prev().text(); let input = $(target).closest('.input-file-row').find('input[type=file]'); $(target).closest('.input-file-list-item').remove(); for(let i = 0; i < dt.items.length; i++)< if(name === dt.items[i].getAsFile().name)< dt.items.remove(i); >> input[0].files = dt.files; >

Источник

How to create a custom file upload button

I find the default HTML file upload button rather ugly. Annoying enough, there seems to be no way to style it directly. Here is how I created a custom file upload button.

1. Use a label tag and point its for attribute to the id of the default HTML file upload button

  type="file" id="actual-btn"/>  for="actual-btn">Choose File 

By doing this, clicking the label element in the browser toggles the default HTML file upload button (as though we clicked it directly). The output of the above code is below. As you can see, we only have a Choose File text (from the label element) a few pixels to the right of the actual upload button. We can click the Choose File text, and it will toggle the upload window (Click it and see)

2. Style the label element and hide the default HTML file upload button

We hide the default HTML file upload button in the browser by adding the hidden attribute to the tag like so

 type="file" id="actual-btn" hidden/> 

label  background-color: indigo; color: white; padding: 0.5rem; font-family: sans-serif; border-radius: 0.3rem; cursor: pointer; margin-top: 1rem; > 

Now we have this beautiful custom button, which actually works like the original file upload button: At this point, we are done. But there is one more glitch to fix. With the default file upload button, there is a no file chosen text beside the button (scroll up to the first codepen window), which gets replaced with the name of the file we will be uploading. Unfortunately, we don’t get to see that with our custom button. How do we do that? What I did was to include a span tag (with an id of file-chosen) right after our custom file upload button. In the javascript file, I listen to the change event on the original file upload button(which we have hidden). A file object is returned which contains the details(such as name, file size etc) of the file uploaded. Then I set the text content of the span element(with the id of file-chosen) to the name property of the file object returned. The final result is below. Test it out. Kindly leave your comments and questions down below

Источник