Question

我输入了类型文件。＆＃39;选择文件＆＃39;将显示在按钮上和旁边，＆＃39;没有选择文件＆＃39;将显示。但我想更改按钮的按钮颜色和文字。

<form action="demo_form.asp">
  Select a file: <input type="file" name="img" class='customBtn'>
  <input type="submit"/>
</form>

我尝试添加一些css

.customBtn input[type='file'] {
  color:#f00
}

有人可以帮我吗？

Answer 1

完整示例：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
label, input {
  color: #333;
  font: 14px/20px Arial;
}
h2 {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 1em;
}
label {
  display: inline-block;
  width: 5em;
  padding: 0 1em;
  text-align: right;
}

/* Hide the file input using
opacity */
[type=file] {
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
}
input,
[type=file] + label {
  border: 1px solid #CCC;
  border-radius: 3px;
  text-align: left;
  padding: 10px;
  width: 150px;
  margin: 0;
  left: 0;
  position: relative;
}
[type=file] + label {
  text-align: center;
  left: 7.35em;
  top: 0.5em;
  /* Decorative */
  background: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}
[type=file] + label:hover {
  background: #3399ff;
}
</style>
<form action="demo_form.asp">
  <input id="f02" type="file" placeholder="Add profile picture" />
  <label for="f02">Add profile picture</label>

</form>
<script>

$("[type=file]").on("change", function(){
  // Name of file and placeholder
  var file = this.files[0].name;
  var dflt = $(this).attr("placeholder");
  if($(this).val()!=""){
    $(this).next().text(file);
  } else {
    $(this).next().text(dflt);
  }
});
</script>

</html>

从 http://codepen.io/nopr/pen/rpsnd

复制

Answer 2

在input元素中添加id或类。为我工作！

更改输入type ='file'的默认文本和样式

2 个答案: