我该如何自定义这样的浏览按钮？

Question

这是用于上传文件的浏览按钮的图像。我想要像这张图片中的浏览按钮。我怎么能这样做？

Answer 1

这是你如何做到的！步骤进行：

1. 我们使用<input type=file>上传文件。但我们实际上并没有展示它。
2. 我们使用自己的自定义button并将所有点击重定向到我们的<input type=file>。
3. 每次<input type=file>更改其值时，我们都会在span中显示。
4. 我们将文件浏览器表单设置为我们喜欢的任何内容。

以下与图片类似，尽可能接近。

.browse-field {
  position: relative;
  display: inline-block;
  
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #999;
  
  border-radius: 5px;
  border: 1px solid #CACACA;
  background-image: linear-gradient(rgba(0,0,0,0.15), transparent 13%);
}

.browse-field>input[type=file] { display: none; }

.browse-field .file {
  display: inline-block;
  margin: 0 0 0 0.8em;
  min-width: 25ch; /* Modify as needed! */
}

.browse-field .btn {
  margin: 6px 9px;
  padding: 5px 14px;
  outline: none;
  border: none;
  border-radius: 4px;
  background: #CACACA;
  color: #FFF;
  font: inherit;
}

/* Modify the following styles as desired */
.browse-field .btn:hover { background: #DADADA; }
.browse-field .btn:active { background: #CACACA; }
.browse-field .btn:focus { box-shadow: 0 0 0 2px rgba(0,0,0,0.1); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
  $(function(){
    $(".browse-field>input[type=file]").each(function(){
      var inpfile = $(this);
      inpfile.change(function(){
        inpfile.siblings(".file").text(this.value)
      })
      inpfile.siblings(".btn").click(function(){
        inpfile.click();
      })
    })
  })
</script>

<div class=browse-field>
  <input type=file>
  <span class=file>No file selected.</span>
  <button class=btn>Browse</button>
</div>

Answer 2

查看此网站：http://css3buttongenerator.com 它可以帮助您创建链接中的按钮。

Answer 3

我想你需要这个吗？小便：click

<div>
    <form>
        <input type="text" name=""/> 
        <input type="submit" value="Submit" class="button"/>
    </form>
</div>

Css

 form input {
        border:0px;
        margin:0px;
        padding:0px;
    }
    form .button{
        padding:5px;
        border-radius:3px;
    }
    div {
        border:1px solid #B2B2B2;
        border-radius:3px;
        width:33%;
        height:auto;
        padding:5px;
    }