html - 您如何设置上传按钮的样式？

Question

我试图给我的上传按钮一些风格，但你看到它给我带来了一些麻烦。当我应用一些样式时，它会影响背景而不是按钮。像这样。

Answer 1

不幸的是，这比仅应用几种样式要困难一些。Bool 先生提供了一个很好的教程，使用 HTML、CSS 和 JavaScript 来完成这项工作：

http://mrbool.com/how-to-style-a-file-upload-button-in-css/26599

希望这有帮助~~

Answer 2

CSS

    <style type="text/css">
        div.fileinputs {
            position: relative;
        }

        div.fakeinput{
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakeinput input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>

HTML

    <div class="fileinputs">
        <input type="file" class="file" />

        <div class="fakeinput">
            <input type="button" value="Select file" />
        </div>
    </div>
</html>

Answer 3

这是示例 CSS 脚本。同样，您可以根据您的要求添加。`

.homebutton {
    border: none;
    background-color: #ededed;
    color: #999999;
    font-size: 15px;
    font-weight: bold;
    height: 40px;
    width: 110px;
    border-radius: 5px 0px 0px 5px;
}

`