Стиль ввода файла

Question

Стиль ввода файла

0

Я хочу обновить этот файл, чтобы он выглядел как изображение, которое я прикреплял.

В настоящее время у меня есть такая точка зрения:

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

Но я хотел бы, чтобы он выглядел следующим образом:

Моя текущая попытка:

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

Как бы я начал стилизовать элемент ввода файлов по умолчанию?

Dave 04 март 2014, в 14:57

Источник

0

Пожалуйста, покажите, что вы уже пробовали.
Popo 04 март 2014, в 13:43
0

Я обновил свой вопрос
Dave 04 март 2014, в 13:50
0

stackoverflow.com/questions/4909228/style-input-type-file
Rohan Büchner 04 март 2014, в 13:53
0

О, Хороший вопрос темы. Спасибо. Я не вижу этого
Dave 04 март 2014, в 13:56

Показать ещё 2 комментария

Теги:

html

css

file-io

3 ответа

0

Существует простое решение css. вам не нужен javascript для этого. так что - просто не.

Ключевое слово решения: <label>.

Метка? - Да, лейбл! Простой элемент HTML. Вы можете легко создать элемент <label>.

Вот пример:

HTML

<label for"foo"></label>
<input type="file" id="foo"/>

CSS

label {
    cursor: pointer;
}

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

Вы не используете сам элемент ввода. Вместо этого вы будете использовать ярлык. Если вы нажмете на метку, вы получите ссылку на "реальный" элемент ввода и его функциональность.

Kami Yang 22 фев. 2016, в 12:41

0

Вы можете использовать jqtransform здесь, чтобы настроить свой тип ввода здесь

jerin 04 март 2014, в 12:32

Ещё вопросы

Пожалуйста, покажите, что вы уже пробовали.
О, Хороший вопрос темы. Спасибо. Я не вижу этого

Rohan Büchner · Accepted Answer · 2014-03-04T11-29-00.000Z

Как слово предупреждения из прошлого опыта, некоторые методы моделирования загрузки файлов не всегда работают в перекрестном браузере и дали мне седые волосы. Но я считаю, что решение ниже должно работать в большинстве случаев

На основании ответа от @BjarkeCK

qaru.site/questions/16580/...

скрипка

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/