Question

我想更新此文件输入，使其看起来像我附加的图像。

目前我有这样的观点：

http://davis-design.de/marktadresse/mein-profil.html

但我希望它看起来如下：

enter image description here

我目前的尝试：

 <span class="btn">
     <span class="fileupload-new">Bild auswählen</span>
     <span class="fileupload-exists">Ändern</span>
     <input type="file" name="bild" id="bild">
 </span>

我如何设计默认文件输入元素？

Answer 1

您可以在此处使用jqtransform来自定义输入类型

Answer 2

正如过去经验中的警告一样，某些文件上传样式的方法并不总是可以跨浏览器工作，并且给了我一些白发。但我相信以下解决方案适用于大多数情况

基于@BjarkeCK的答案

https://stackoverflow.com/a/9182787/1105314

<强>小提琴

http://jsfiddle.net/D9T4p/1/

<强>标记

<div style="padding:100px;">
    <div class="uploadButton">
        BILD AUSWÄHLEN
        <input type="file" />
    </div>
</div>

<强>的Javascript

$(function() {
    $(".uploadButton").mousemove(function(e) {
        var offL, offR, inpStart
        offL = $(this).offset().left;
        offT = $(this).offset().top;
        aaa= $(this).find("input").width();
        $(this).find("input").css({
            left:e.pageX-aaa-30,
            top:e.pageY-offT-10
        })
    }); 
});

CSS

.uploadButton input[type="file"] {
    cursor:pointer;
    position:absolute;
    top:0px;
    opacity:0;
}

.uploadButton {    

   position:relative;
   overflow:hidden;
   cursor:pointer;

/*** (Copied from the link you supplied) ***/
   text-transform: uppercase;
   font-size: 13px;
   font-family: 'Roboto',Arial,sans-serif;
   padding: 8px 22px;
   display: inline-block;
   -moz-border-radius: 2px;
   border-radius: 2px;
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   -webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
   color: #FFF;
   background-color: #2561BA;
}

<强>更新仅CSS解决方案：

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Answer 3

有一个简单的css解决方案。你不需要任何javascript。所以 - 不要。

解决方案的关键字是：<label>。

标签？ - 是的标签！简单的HTML元素。您可以轻松设置<label for"foo"></label> <input type="file" id="foo"/>元素的样式。

以下是一个示例：

HTML

label {
    cursor: pointer;
}

#foo {
    height: 0.1px;
    width: 0.1px;
    z-index: -1;
}

CSS

1) Bob posts an ad with ID #1234
2) Alice is interested and she contacts him through the website control panel
3) Bob receives an email from a-1234@mysite.com to his email bob@bob.com
4) Bob answers to a-1234@mysite.com, my web server receive the email and forwards it to alice@alice.com
5) Alice receives the email to her email alice@alice.com from b-1234@mysite.com
6) Alice answers to b-1234@mysite.com, my web server receive the email and forwards it to bob@bob.com
7) ...and so on

您不使用input元素本身。您将使用标签代替。如果您点击标签，则会引用真实的＆＃39;输入元素及其功能。

样式文件输入

3 个答案:

HTML

CSS