04 февраля 2014

Стилизовать инпут типа файл достаточно просто при помощи CSS. Для этого необходимовырезать картинку, заменяющую изображение данного input. Например мы вырезали картинку  input_file.png размером 129px на 44рх. 

Завернем наш инпут в <div class="input-file"> Получится такой html-код:
<div class="input-file"><input type="file" /></div>

 ЦСС для этого будет такой...

CSS:

div.input-file {
      overflow:hidden;
      width:129px;
      height:44px;
      cursor:pointer;
      background:url(../images/input_file.png) no-repeat;
    }
div.input-file input {
      opacity:0;
      filter:alpha(opacity:0);
      font-size:199px;
      cursor:pointer;
      padding:0px;
      margin:0px;
      border:none;
      margin-left:-450px;
    }

Вот что должно получиться:

 
Добавить комментарий





Практически весь контент размещенный на сайте, вся информация является продуктом студии WSI. Если материалы взяты с других ресурсов, то обязательно указана ссылка на эти ресурсы. Вы можете бесплатно пользоваться информацией с нашего сайта, размещать ее на своих сайтах, но так же обязательна ссылка на наш сайт, Web-Sputnik.Info.


Меню
Копирайт © 2021 'Tochcha' Все права защищены