Css 如何自定义输入类型文件按钮和文本框

我需要从下面的表单自定义文件上传按钮

现在我的文件上传按钮看起来像文件上传图片。我需要像自定义文件上传图片一样自定义它

<form id="myform" action="" enctype="multipart/form-data">

    <input id="tele" type="file" name="filename" />
    <br/>
    <input class="btn" type="submit" value="Upload" />
</form>

当然，给出您想要的样式，但下面提供了一些如何做到这一点的示例

input[type="file"] {
       border: 4px solid red;
       border-radius: 40px;
}

或尝试

#tele {
     border: 4px solid red;
     border-radius: 50px;
 }

如果出于某种原因，这两种方法都不起作用，那么您可能需要更具体一些

#myform #tele {
     border: 3px solid blue;
 }

---

您可以使用

background:url（'image_-url'）

要添加按钮图像

要解决此问题，您可以将

输入

标记括在

标签

内，并设置标签样式，从而覆盖按钮。

查看图像后，我想您希望输入类型为文本框，而不是按钮。您可以尝试将输入类型文件保持为隐藏状态，并将文本框设置为这样吗

 <input id="txt" type = "text" value = "Choose File" 
       onclick ="javascript:document.getElementById('file').click();">
      <input id = "file" type="file" style='visibility: hidden;' name="img" onchange="ChangeText(this, 'txt');"/>



function ChangeText(oFileInput, sTargetID) {

    document.getElementById(sTargetID).value = oFileInput.value;
}

函数ChangeText（oFileInput，sTargetID）{
document.getElementById（sTargetID）.value=oFileInput.value；
}

您可以轻松地将css应用于此文本框

---

答案可能重复：按照您希望的样式进行设计。我需要自定义type=“file”按钮“not submit”按钮@codehorse

你的代码不支持我的要求。我需要自定义“选择文件”或“浏览”按钮。你能用Fiddle更新吗？我已经根据我的要求用图片更新了我的帖子。我希望你现在能理解我的问题。@codehorse是的，部分工作正常。我要做什么才能在文本框@Nitin varpeIt不起作用。你能用这个更新小提琴吗code@Nitinvarpeit正在工作，但是我得到了文件名和路径（C:\fakepath\sample.docx），我只想显示文件name@Nitin但在我的机器上，它是唯一给出文件名的。好的，你可以使用子字符串来获取\之后的最后一个字符串，这不会有任何问题