HTML/CSS - с помощью образа для ввода типа = файл

3

взглянуть на Styling an input type="file".

2009-08-29 15:29:55 cletus

2

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

Quirksmode.org has a section on styling file upload fields тем не менее, что вы хотели бы обратиться.

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

источник

2009-08-29 15:31:31

0

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

<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>

источник

2009-08-29 16:09:31

HTML/CSS - с помощью образа для ввода типа = файл

ответ

Смежные вопросы