我怎样才能像这样自定义浏览按钮？ [关闭]答案

【问题标题】：How Can I customize browse button like this? [closed]我怎样才能像这样自定义浏览按钮？ [关闭]
【发布时间】：2015-10-15 21:50:34
【问题描述】：

这是用于上传文件的浏览按钮的图像。我想创建一个像这张图片一样的浏览按钮。我该怎么做？

【问题讨论】：

不清楚你问的是什么。如果该图像实际上是某个页面的屏幕截图，那么您为什么不简单地检查代码呢？既然在那种情况下你有 html 和 css，你还缺少什么？ 看看！
不，它不是任何网页的截图。我是从 psd 文件中找到的。但我做不到。
@arkascha：.PSD 文件是 Adobe PhotoShop 中使用的分层图像文件。这是一个 Photoshop 文档文件。
photo-shope 文档
啊，一个photoshop格式的文件。为什么不马上说呢？ ;-) 那你确实有问题。由于这是一种专有格式，因此您无法真正研究它。即使你可以这样做也是违法的。所以你必须猜测。我建议您从下面给出的提示开始：帮助您设置按钮样式的在线“按钮向导”之一。但我仍然不明白问题是什么。它是一个按钮。您可以设置按钮样式。 做吧。

标签： html css

【解决方案1】：

这就是你的做法！步骤：

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

以下是与图像相似，尽可能接近。

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

【讨论】：

【解决方案2】：

我想你需要这个。试试看：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;
    }

【讨论】：

【解决方案3】：

查看此网站：http://css3buttongenerator.com 它将帮助您在链接中创建一个按钮。

【讨论】：

感谢您的回答。但这和我想要的不一样。请看我给的图片。
您可以准确地创建您的按钮。它是一个发电机。