How to style a html submit form?

Question

Here is my file upload form

<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="filetoupload" id="filetoupload" onchange="this.form.submit();">
</form>

It makes a 'choose file' button to select a file to upload, but how do style this button in css, as in change the colour, size, position and font?

I have tried input[type=submit] {} but that doesn't seem to work

Also, how can I change the words on the button from 'choose file' to 'Upload' ?

score 2 · Answer 1 · edited May 23 '17 at 11:44

2

The type is file, not submit, as indicated by type="file":

input[type=file] {
    /* styles here */
}

Styling the button, however, is complex. As explained in this answer, you have to shift the actual input field out of view, then add a button with your own styling.

edited May 23 '17 at 11:44

Community

1
1

answered Dec 20 '14 at 03:06

elixenide

44,308
16
74
100

Oh sorry that was a silly mistake :) But I have changed the css to type=file instead, but it only edits the space around the button, not the actual button, for example the color applies around the button but not to it – nickelton6 Dec 20 '14 at 03:10
See my edit. Unfortunately, what you want to do is very tricky and requires a combination of CSS and JavaScript to get the desired behavior. – elixenide Dec 20 '14 at 03:11

score 2 · Answer 2 · answered Dec 20 '14 at 03:10

2

You missed file, you are creating style for submit, as you have input type="file":

input[type=file] {
    /* styles here */
}

And for second one, to change the words on the button from 'choose file' to 'Upload', add an attribute value="Upload"

<input type="file" name="filetoupload" id="filetoupload" value="Upload" onchange="this.form.submit();">

answered Dec 20 '14 at 03:10

Thanks but I have changed that and it still says Choose file. The new code is – nickelton6 Dec 20 '14 at 03:14

Ian Hazzard · Answer 3 · 2015-02-18T01:56:07.153

It's tricky to do. If you can use jQuery, try this code I threw together.

$('input[type="file"]').change(function() {

  var value = $(this).val();

  var value = value.replace("C:\\fakepath\\", "")

  if (value) {
    $(this).siblings('#fileName').html(value);
  } else {

    $(this).siblings('#fileName').html('upload');

  }

});

input[type=file] {
  display: none;
}
label {
  cursor: pointer;
}
label > span {
  border: 1px solid black;
  padding: 5px;
  border-radius: 5px;
  background: white;
  color: black;
  transition: background 0.5s, color 0.5s;
}
label > span:hover {
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" method="post" enctype="multipart/form-data">
  <label>
    <input type="file" name="filetoupload" id="filetoupload" onchange="this.form.submit();"><span id="fileName">upload</span>
  </label>
</form>

How to style a html submit form?

3 Answers3