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

Question

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

现在我的fileupload按钮看起来像fileupload image.I需要自定义它像自定义文件上传图像

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

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

Answer 1

观看你的图片之后，我想你想要输入类型作为文本框而不是按钮。可以尝试将输入类型文件保持为隐藏并且具有这样的文本框

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

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

DEMO

Answer 2

提供您想要的样式，但下面提供了一些如何执行此操作的示例。

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

或尝试

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

如果由于某些原因这些都不起作用，你可能需要更加具体，如此

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

Answer 3

您可以使用background: url('image_url');添加按钮图片

Answer 4

要解决此问题，您可以将input标记括在label内并设置标签，从而覆盖按钮。