Создать пользовательский файл ввода

Question

Создать пользовательский файл ввода

0

Я работаю над вводом пользовательского файла со следующим HTML:

<div class="file">
  <a>browse<input type="file" name="annex"/></a>                 
  <span class="path">path</span>
</div>
<div class="help">Only PDF files allowed</div>

Вы можете посмотреть онлайн-пример здесь: http://codepen.io/mdmoura/pen/qAvDk

ПРОБЛЕМЫ

CSS

Я не могу вертикально выравнивать текст (в красном) и текст пути (синим цветом). Я попытался применить встроенный блок и те же дополнения для обоих, но не повезло... Как я могу его решить?

Jquery

Я использую var input = $(this); но если я использую var this = $(this); он не работает. Зачем?
Использование $('.path').text(label); работает... Но я хотел бы получить span после: файла, на который я input.next().text(label);... Я попробовал input.next().text(label); Но это не работает. Зачем?

Благодарю вас, Мигель

Miguel Moura 03 окт. 2013, в 12:55

Источник

0

Вы установили отступы: 8px 0px; в классе "div.file a" для вертикального выравнивания.
krutssss 03 окт. 2013, в 10:31
0

Извините, я не понимаю ... Я только что обновил свой пример: codepen.io/mdmoura/pen/qAvDk . A и span вертикально выровнены в Chrome и Safari, но не в IE и Firefox. Есть идеи, как это решить?
Miguel Moura 03 окт. 2013, в 10:48
0

Вы установили float: left; в классе "div.file a", а также установите padding: 8px; "div.file span" работает в firefox
krutssss 03 окт. 2013, в 10:58
0

Я думаю, что использование float сделало это ... Мой код может быть упрощен? Любое предложение приветствуется.
Miguel Moura 03 окт. 2013, в 11:38

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

Теги:

jquery

css

1 ответ

Ещё вопросы

Вы установили отступы: 8px 0px; в классе "div.file a" для вертикального выравнивания.
Извините, я не понимаю ... Я только что обновил свой пример: codepen.io/mdmoura/pen/qAvDk . A и span вертикально выровнены в Chrome и Safari, но не в IE и Firefox. Есть идеи, как это решить?
Вы установили float: left; в классе "div.file a", а также установите padding: 8px; "div.file span" работает в firefox
Я думаю, что использование float сделало это ... Мой код может быть упрощен? Любое предложение приветствуется.

Explosion Pills · Accepted Answer · 2013-10-03T09-26-00.000Z

Проблема CSS

Не проблема во всех браузерах, но привязка и интервал выравниваются, если вы удаляете padding из диапазона, добавьте vertical-align: middle к якорю и удалите отрицательное нижнее поле.

Проблемы с JS

this не изменчиво. Он не может быть назначен, и это фактически создает синтаксис (я думаю)

Недопустимое назначение левой руки

Существует множество способов установить this при объявлении или вызове функции, но var input = $(this) является общим решением. Я бы просто придерживался этого.

Что касается вашего селектора, вам нужно будет использовать input.parent().next(). Ввод - это ребенок якоря и не имеет братьев и сестер.

Проблема с CSS: я попробовал ваше предложение, но у меня продолжают возникать проблемы в Firefox и IE. Работает в Chrome и Safari. Любая идея? JS проблемы решены ...