Javascript 更改输入类型='；文件'；_Javascript_Html_Css

Javascript 更改输入类型='；文件'；

javascript html css

Javascript 更改输入类型='；文件'；,javascript,html,css,Javascript,Html,Css,我有一个file类型的输入“选择文件”将显示在按钮上，旁边将显示“未选择文件”。但是我想更改按钮的颜色和文本有人能帮我吗？完整的例子： <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 Aria

我有一个file类型的输入“选择文件”将显示在按钮上，旁边将显示“未选择文件”。但是我想更改按钮的颜色和文本

有人能帮我吗？

完整的例子：

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


标签，输入{
颜色：#333；
字体：14px/20px Arial；
}
氢{
字体大小：16px；
字体大小：粗体；
文本转换：大写；
边缘：0.01米；
}
标签{
显示：内联块；
宽度：5em；
填充：0.1em；
文本对齐：右对齐；
}
/*使用隐藏文件输入
不透明*/
[类型=文件]{
位置：绝对位置；
过滤器：alpha（不透明度=0）；
不透明度：0；
}
输入
[类型=文件]+标签{
边框：1px实心#CCC；
边界半径：3px；
文本对齐：左对齐；
填充：10px；
宽度：150px；
保证金：0；
左：0；
位置：相对位置；
}
[类型=文件]+标签{
文本对齐：居中；
左：7.35em；
顶部：0.5em；
/*装饰性*/
背景：#333；
颜色：#fff；
边界：无；
光标：指针；
}
[类型=文件]+标签：悬停{
背景:#3399ff；
}
添加个人资料图片
$（“[type=file]”）。在（“change”，function（）上{
//文件名和占位符
var file=this.files[0]。名称；
var dflt=$（this.attr（“占位符”）；
if（$（this.val（）！=“”）{
$（this.next（）.text（文件）；
}否则{
$（this.next（）.text（dflt）；
}
});

复制自

向输入元素添加id或类。为我工作

你到底尝试了什么？请检查更新的fiddle链接。大多数人使用javascript来更改它，直到它无法更改按钮样式和按钮文本。更新了我的答案：）

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

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