Делаем стилизованный инпут

Убираем бредовые стандартные инпуты и делаем во всех браузерах один свой стилизованный input.

1. Берем стандартную кнопку из браузера Mozilla.
2. В Photoshop’е добиваемся примерно этого:

3. Следующим этапом оформляем код примерно такого содержания.
CSS:

.file_1 { background: #fff; color: #888; }
div.filestyle{ background:url(choose-file.png) 0 0 no-repeat;}
div.filestyle:hover{ background:url(choose-file.png) 0 -25px no-repeat;  }

Javascrip:

$(function() {
      $("input.file_1").filestyle({
          image: "choose-file.png",
          imageheight : 25, /*высота обзора*/
          imagewidth : 73, /*ширина обзора*/
          width : 500 /*ширина текстового поля*/
      });
  });

И конечно небольшая часть html кода:

< form action="#">
          < input type="file" class="file_1" />
< /form>

Собственно все, получаем на выходе стилизованный инпут.
К документу цепляем 2 файла, версии на момент выхода статьи
jquery-1.4.2.min
jquery.filestyle



Вконтакте
FaceBook
WordPress

Комментариев нет »

Еще нет комметариев.

Оставить комментарий