Question

这是我的文件上传表单

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

它会选择一个＆＃39;选择文件＆＃39;按钮选择要上传的文件，但如何在css中设置此按钮的样式，如更改颜色，大小，位置和字体？

我尝试了input[type=submit] {}，但似乎无法正常工作

另外，如何更改按钮上的字词？选择文件＆＃39;到＆＃39;上传＆＃39; ？

Answer 1

类型为file，而不是submit，如type="file"所示：

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

然而，按钮的样式很复杂。正如this answer中所述，您必须将实际输入字段移出视图，然后添加具有您自己样式的按钮。

Answer 2

您错过了file，正在为submit创建样式，因为您input type="file"：

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

对于第二个，要将按钮上的字词从“选择文件”更改为“上传”，请添加属性value="Upload"

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

Answer 3

这很棘手。如果您可以使用jQuery，请尝试使用此代码将其放在一起。

＆＃13;

$('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');

  }

});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如何设置html提交表单的样式？

3 个答案: