Стилизация ввода type = "file"

Question

Я читал об этом из нескольких мест.

Я попробовал метод, найденный здесь: http://www.quirksmode.org/dom/inputfile.html

Я не смог заставить его работать.Поэтому я попробовал метод CSS / HTML, и он прекрасно работает в Firefox, Chrome, Safari и Opera (все последние версии), но не в (как вы уже догадались) IE8.

Выглядит хорошо, когда вы одинокищелкните по нему, это не работает.Если дважды щелкнуть по нему, это сработает.

Есть идеи, как заставить это работать одним щелчком мыши?

В настоящее время я использую условные комментарии IE, чтобы сообщить пользователям IE, что нужно дважды щелкнуть по кнопке выбора.кнопка.В настоящее время сайт находится в разработке и пока не предназначен для пользователей, и хотел бы решить эту проблему, прежде чем он будет запущен, если это возможно.

Answer 1

Хорошее решение, которое позволяет вам выполнять работу одним кликом, - это использовать элемент метки и его свойство «для», которое позволяет вам подключить его к входу.Другим важным элементом этого решения является применение фильтра: альфа (непрозрачность = 0) к элементу ввода.

HTML:

 <label for="fileupload"> 
     <input id="fileupload" type="file" >   
     <p>click here</p>
 </label>

CSS:

label {
   background-color: #ECECEC;
   display: block;
   width: 600px;
   height: 600px;
   cursor: pointer;
}

input[type="file"] {
   width: 100%;
   height: 100%;
   z-index: 100;
   position: relative;
   opacity: 0;
   filter:alpha(opacity=0); 
   cursor: pointer;
 }

Answer 2

У меня есть решение, которое поможет вам стилизовать кнопку, как вы хотите, и держать ее одним щелчком мыши во всех браузерах.

В основном создайте div и присвойте ему класс или id, для примера, давайте назовем это "outer_div".

Затем поместите файл ввода внутри «external_div» и также дайте ему идентификатор, для этого примера давайте назовем его «file_input_name».

Далее идет CSS ...

Для «external_div» задайте следующие свойства

    #outer_div{
    cursor:pointer;
    overflow:hidden;
    display:block;
    float:left;
    position:relative;
    width:83px;
    height:25px;
    background:url(your button image goes here) no-repeat; 
    }

Убедитесь, что ваша кнопка имеет те же свойства ширины, чтобы это работало.

Далее CSS для file_input_name:

  #file_input_name{
position:relative;
float:left;
cursor:pointer;
right:138px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
text-align: right;
        }

Это должно сработать.По сути дела, мы помещаем ввод файла так, чтобы кнопка обзора находилась над фоновым изображением, а не там, где находится URL файла.

Я сделал это сам, и он работает в IE и Firefox / safari /хром.

Дайте мне знать, как вы поживаете или если вам нужна дополнительная помощь.

Answer 3

Я думаю, что нашел два решения вашей проблемы.Вы используете: filter:alpha(opacity: 0) в своем классе .file, таким образом скрывая фактическую кнопку "Обзор ...", которую вы обычно видите в элементах управления загрузкой.

Первым решением было бы использование условной установки CSS, которая заменит ваше модное изображение «Выбрать» на обычную, но стилизованную кнопку «Обзор», когда пользователь использует IE.

Второй будет играть с размером входа FileAttachment, поэтому скрытая кнопка «Обзор ...» будет соответствовать положению изображения «Выбрать».Оттуда вам просто нужно убедиться, что свойство z-index кнопки выше, чем у изображения.

Дайте мне знать, если эти решения решают ваши потребности.

: D

Answer 4

Использовать магию Bootstrap , я сделал это, очень просто.

Хорошо, после вставки ссылки на Bootstrap css в ярлык вашей головы, сделайте это:

<div class="fileUpload btn btn-primary"> <span>Upload</span> <input type="file" class="upload" /> </div>

Это создаст файл типа ввода, стилизованный с помощью начальной загрузки CSS.

А теперь сложная часть:

  .fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

И все, теперь у вас есть функциональная кнопка (тип входного файла) со стилем.

Я нашел эту статью , потому что у меня была та же проблема, вы можете проверить ее для получения дополнительной информации.

Answer 5

Причина, по которой они должны сделать двойной щелчок, заключается в том, что это «текстовая область».

Первое изображение здесь имеет элемент управления загрузкой IE8.Обратите внимание, как там текстовое поле и кнопка.Пользователь нажимает кнопку один раз ИЛИ дважды щелкает текстовое поле, чтобы вызвать кнопку.

[arg, извините, моя репутация недостаточно высока для изображений]

Когда вы накладываете этотекстовая область пересекается с тем, что вы хотите сделать одним щелчком, в результате чего требуется двойной щелчок.

Это следующее изображение - тот же элемент управления загрузкой файлов без непрозрачности, поверх которого расположена кнопка,и имеет план от инспектора DOM IE8.Если я щелкну правую большую часть синего прямоугольника, сработает один щелчок, для каждого другого места требуется двойной.Также обратите внимание на текстовую вставку редактирования, накладываемую из файла ввода поверх кнопки.

[изображение опущено]

Решение состоит в том, чтобы изменить размер / расположить ввод скрытого файла файла, чтобы поместить кнопку обзора там, где выхочу.

Answer 6

Прошло много времени с тех пор, как я задал этот вопрос, и ниже приведен метод, который я сейчас использую для стилизации файловых вводов. Эта информация взята из Codrops . Это более подробно и дает несколько примеров, но вот основы:

HTML

 <input type="file" name="file" id="file" class="inputfile" />
 <label for="file">Choose a file</label> 

НЕОБХОДИМО ПРОВЕРИТЬ НА JS

<html class="no-js">
  <head>
      <!-- remove this if you use Modernizr -->
      <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
  </head>
</html>

CSS

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

JS

;( function ( document, window, index )
{
    var inputs = document.querySelectorAll( '.inputfile' );
    Array.prototype.forEach.call( inputs, function( input )
    {
        var label    = input.nextElementSibling,
            labelVal = label.innerHTML;

        input.addEventListener( 'change', function( e )
        {
            var fileName = '';
            if( this.files && this.files.length > 1 )
                fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
            else
                fileName = e.target.value.split( '\\' ).pop();

            if( fileName )
                label.querySelector( 'span' ).innerHTML = fileName;
            else
                label.innerHTML = labelVal;
        });

        // Firefox bug fix
        input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
        input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
    });
}( document, window, 0 ));

Answer 7

Если вы пытаетесь скрыть стандартную кнопку ввода без потери поведения IE8 по умолчанию для входного файла, а также кросс-браузерной поддержки, попробуйте применить

input.file{
   width:0 ; 
   height:0;
}  //supposing your file input has class of .file`   

в css и тебе пора

Answer 8

В принципе это не ваша проблема, на самом деле IE принимает управление загрузкой файлов по-другому. Он понимает элемент управления загрузкой файлов как текстовое поле и кнопку ввода, когда вы щелкаете один раз по кнопке загрузки файла «Обзор» или «выбрать», открывается диалоговое окно открытия, но когда вы щелкаете один раз по тексту загрузки файла, оно фокусируется на текстовом поле, а затем снова щелкните по этому текстовому полю, откроется открытое диалоговое окно. Можно сказать, что это предопределенная ошибка в IE, поэтому мы ничего не можем с этим поделать, и большинство пользователей знают об этой проблеме.