4

I want to try design this :

<input type="file" multiple>

What I want: I want change its color, also change its size...

Improve this question
1
  • can you more specific?what is your expected design?what you want to change Commented Apr 11, 2016 at 4:58

5 Answers 5

Reset to default
12

File type is a native element henceforth you cant change it's appearance. Instead you can hide at the back of some element.

<div> Choose File <input type="file" class="hide_file"> </div> div{ padding:5px 10px; background:#00ad2d; border:1px solid #00ad2d; position:relative; color:#fff; border-radius:2px; text-align:center; float:left; cursor:pointer } .hide_file { position: absolute; z-index: 1000; opacity: 0; cursor: pointer; right: 0; top: 0; height: 100%; font-size: 24px; width: 100%; }

Refer Here

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

hi, i want to change only choose file button.... but ur method effect on other field also.
4

You can simply use ::-webkit-file-upload-button in css and style your Choose file button.

Improve this answer

Comments

3

You can use sample 

`https://jsfiddle.net/gabrieleromanato/mxq9R/`

to change style of input files.

Improve this answer

1 Comment

look at css box, this button is a picture, you can download and edit this picture and replace with orginal to change your font color
2 
input[type='file']{ color:blue; font-size:25px; }
Improve this answer

1 Comment

This styles the area behind and around the system button, not the button itself.
0

You can hide it, and click it with another button:

<input type="file" style="display:none" id="inpFile"> <button onclick="document.getElementById('inpFile').click()">Select File</button>

You can then style the <button> however you want.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.