HTML / CSS - использование изображения для ввода type = file - PullRequest
Новая
       21

HTML / CSS - использование изображения для ввода type = file

2 голосов
/ 29 августа 2009

Как использовать это изображение:

http://h899310.devhost.se/proxy/newProxy/uplfile.png

вместо обычного: 

<input type="file" />

Ответы [ 3 ]

3 голосов
/ 29 августа 2009
2 голосов
/ 29 августа 2009

Я не совсем уверен, хотите ли вы стилизовать поля загрузки файлов или просто хотите использовать png-файл в стиле.

В Quirksmode.org есть раздел о стилях полей для загрузки файлов , на который вы бы хотели сослаться.

Если вы хотите использовать файл PNG для использования в стиле внутри страницы, вам должно быть интересно, как установить фон с помощью изображений, хотя это может работать не для всех элементов HTML.

0 голосов
/ 29 августа 2009

Я сделал что-то подобное, и это сработало отлично! 

<script type="text/javascript">

var t = 0;
var IE = navigator.appName;
var OP = navigator.userAgent.indexOf('Opera');
var tmp = '';

function operaFix() {

   if (OP != -1) {
      document.getElementById('browser').style.left = -120 + 'px';
   }

}


function startBrowse() {

   tmp = document.getElementById('dummy_path').value;
   getFile();

}

function getFile() {

   // IF Netscape or Opera is used...
   //////////////////////////////////////////////////////////////////////////////////////////////
   if (OP != -1) {

   displayPath();

      if (tmp != document.getElementById('dummy_path').value && document.getElementById('dummy_path').value 

!= '') {

         clearTimeout(0);
         return;

      }

   setTimeout("getFile()", 20);

   // If IE is used...
   //////////////////////////////////////////////////////////////////////////////////////////////
   } else if (IE == "Microsoft Internet Explorer") {

      if (t == 3) {

         displayPath();

         clearTimeout(0);
         t = 0;
         return;

      }

   t++;
   setTimeout("getFile()", 20);


   // Or if some other, better browser is used... like Firefox for example :)
   //////////////////////////////////////////////////////////////////////////////////////////////
   } else {

      displayPath();

   }

}


function displayPath() {

   document.getElementById('dummy_path').value = document.getElementById('browser').value;

}

</script>



<style type="text/css">

#browser
   {
   position: absolute;
   left: -132px;
   opacity: 0;
   filter: alpha(opacity=0);
   }

#browser_box
   {
   width: 104px;
   height: 22px;
   position: relative;
   overflow: hidden;
   background: url(button1_off.jpg) no-repeat;
   }

#browser_box:active
   {
   background: url(button1_on.jpg) no-repeat;
   }

#dummy_path
   {
   width: 350px;
   font-family: verdana;
   font-size: 10px;
   font-style: italic;
   color: #3a3c48;
   border: 1px solid #3a3c48;
   padding-left: 2px;
   background: #dcdce0;
   }

</style>

<body onload="operaFix()">


   <div id="browser_box">
   <input type="file" name="my_file" id="browser" onclick="startBrowse()" />
   </div>

</body>
...