HTML & CSS - Change text value in input button

Question

I'm trying to change the text value of the input button of type file. I know it is the parameter value='' but in this case it is not working.

My code:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link href="assets/css/custom-sugar-style.css" rel="stylesheet">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 text-center">
      <img class="img-sugar" src="assets/images/SUGAR.png" />
      <br>
      <br>
      <br>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 text-center">
      <form action="shareimage.php" method="post">
        <input class="button-camera" type="file" accept="image/*" capture="camera" value="Take a photo" />
      </form>
    </div>
  </div>

Could you help me?

Thanks!

Check this post [here](http://stackoverflow.com/questions/686905/labeling-file-upload-button). This might help. — realtymarker, Nov 17 '16 at 12:09
Do you mean ``placeholder="Something that appears inside the input field until text is entered by a user"``? — Joshua, Nov 17 '16 at 12:11

score 2 · Accepted Answer · answered Nov 17 '16 at 12:28

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
 {
var fileinput = document.getElementById("browse");
fileinput.click();
 }
function Handlechange()
 {
 var fileinput = document.getElementById("browse");
  var textinput = document.getElementById("filename");
  textinput.value = fileinput.value;
  }
</script>

 <input type="file" id="browse" name="fileupload" style="display: none"    onChange="Handlechange();"/>

 <input type="button" value="Take a photo" id="fakeBrowse"    onclick="HandleBrowseClick();"/>No file chosen
</body>
</html>

Try this technique and apply your css class in it.

score -3 · Answer 2 · edited Nov 17 '16 at 14:42

-3

You are using the input type file that's why you can not change the value.

<input class="button-camera" type="file" accept="image/*" capture="camera" value="Take a photo" />

change type

<input class="button-camera" type="Button" accept="image/*" capture="camera" value="Take a photo" />

edited Nov 17 '16 at 14:42

empiric

7,825
7
37
48

answered Nov 17 '16 at 12:12

rani

68
8

The OP intends to use the input type file. Changing type would not help – Mandeep Jain Nov 17 '16 at 12:15
Please clarify your answer first try your solution then tell complete and clear answer to get the up vote. – Nov 17 '16 at 13:25

HTML & CSS - Change text value in input button

2 Answers2