输入字段和自定义图标

Question

我希望用户能够直接从手机更新他们的图像，新的HTML5输入字段使这成为可能。然而，输入字段通常非常难看，所以我想做一个设计，我在图片中间有一个相机图标。

如上所示（除了它没有居中）我需要摆脱旧的输入字段，我可以使用它们：

            ::-webkit-input-placeholder { /* WebKit browsers */
                color:    #999;
            }
            :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color:    #999;
            }
            ::-moz-placeholder { /* Mozilla Firefox 19+ */
                color:    #999;
            }
            :-ms-input-placeholder { /* Internet Explorer 10+ */
                color:    #999;
            }

然而，这并不能使相机可以点击。我该怎么做？

Answer 1

我认为你需要的是这个问题： Icon inside button in HTML

正如@Alec解释的那样：

CSS：

.facebook-button {
 background: url('facebook-logo.png') left center no-repeat;
 padding-left: 15px;

}

HTML：

<input type="button" class="facebook-button" value="Facebook" />