隐藏默认css按钮[重复]答案

【问题标题】：Hide default css button [duplicate]隐藏默认css按钮[重复]
【发布时间】：2013-03-26 10:42:00
【问题描述】：

我正在使用：

<div class="upload-area"> 
   <input type="file" name="attachemnt" class="buttonclass" /> 
</div>

我试图隐藏默认的 css 按钮，并制作一个不错的按钮，但我不知道怎么做。

有人可以帮忙吗？

【问题讨论】：

您的意思是要更改默认浏览按钮吗？
stackoverflow.com/questions/572768/…

标签： css html button

【解决方案1】：

没有标准的方法。你只能用黑客来做。这个方法对你有好处

.fileInput {
    cursor: pointer;
    height: 25px;
    overflow: hidden;
    position: relative;
    width: 100px;
}

.fileInput em {
    background: linear-gradient(to bottom, #D65A75 0%, #CD4874 100%) repeat scroll 0 0 transparent;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: 'Arial';
    font-size: 15px;
    font-style: normal;
    margin-top: 5px;
    padding: 4px 7px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #B8283D;
}

.fileInput input {
    bottom: 0;
    cursor: pointer;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

HTML 标记：

<span class="fileInput">
    <input id="file" type="file" name="file">
    <em>Browse computer</em>
</span>

http://jsfiddle.net/GHbNa/ 的工作演示

【讨论】：