Автор

25 12.2015
Оформляем File Inputs в красивые кнопки

Оформляем File Inputs в красивые кнопки


Есть довольно много методов для <input type="file" /> элемента. Я попробовал большинство из них, но ни один не был достаточно хорош. Вероятно, худшей техникой была та, в которой входной элемент помещается в емкость (которая имитирует кнопки), а на вход следует за курсором, так что, когда вы щелкните в любом месте на контейнере, вы нажимаете на ввод. Звучит интересно и странно одновременно, верно? Во всяком случае, он имел некоторые неприемлемые недостатки (удобство использования, сенсорный).

Вот и я использовал данный скрипт в форме отправки отзыва на странице www.s-sd.ru/otzyvy/

 

ДЕМО
ИСХОДНИКИ

 

jquery

Ну вы наверное знаете, что ставим их между тегами <head>...</head>.

<script src="js/custom-file-input.js"></script>
<script src="js/jquery-v1.min.js"></script>
<script src="js/jquery.custom-file-input.js"></script>

HTML

<div class="box">
    <input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
    <label for="file-1"><!-- Иконка --><span>Загрузить файл&hellip;</span></label>
</div>

JS

Ставите в удобное для вас место, можно рядом с новой формой <input type="file" />

(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);

CSS

Стили очень просты и не обязательно подключать весь component.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 */
}


/* style 1 */

.inputfile-1 + label {
    color: #f1e5e6;
    background-color: #d3394c;
}

.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:hover {
    background-color: #722040;
}

@media screen and (max-width: 50em) {
	.inputfile-6 + label strong {
		display: block;
	}
}

Результат

Вот и всё

Материал взят из зарубежного источника и представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

27 04.2013
Оформляем File Inputs в красивые кнопки

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


08 04.2013
Оформляем File Inputs в красивые кнопки

Продолжаем рассматривать интересные фишки, которые можно достичь с помощью CSS. В Данном уроке мы рассмотрим весьма интересный, на мой взгляд, эффект движущихся объектов, а именно шестереночного механизма с помощью правил CSS3. Эффект достаточно красиво смотрится, плавно работает, и представляет собой картину полноценного механизма из задействованных деталек различной величины. Эффект весьма специфичный и не каждому веб-мастеру станет полезным, но при правильном применении станет весомым атрибутом дизайна..


20 04.2013
Оформляем File Inputs в красивые кнопки

На сайтах, в основном, можно встретить вывод подписей для изображений, которые содержат различную информацию о материале. Зачастую эти, так называемые, подсказки весьма скучны и не привлекают взор пользователя к необходимой информации под изображением, но эту, пускай не такую уж и большую проблему, можно весьма просто решить с помощью маленького плагина jQuery. Плагин Drop Caption берет содержание атрибута изображения title и делает из него подпись, которая появляется только при наведении курсора мыши на картинку.


21 04.2013
Оформляем File Inputs в красивые кнопки

Сайт это целостная система различных элементов. Каждые детали подогнаны один под одного и работают в сложенном порядке. Но иногда следует подчеркнуть желаемые элементы на сайте. Будь то реклама, популярные статьи или просто полезная информация к которой необходимо привлечь взор посетителя. Для этого существуют множество визуальных приемов. Но мы рассмотрим весьма не навязчивый подход к поставленному вопроса. В данном уроке мы заставим элементы следовать за прокруткой страницы.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close