Dosya yükle düğmesini javascript kullanmadan biçimlendirin

Question

İstemci 'un hiçbir javascript kullanılmasını istemediği bir web sitesinde çalışıyorum. Aşağıdaki kod parçasını kullanarak web sitem için dosya güncelleme düğmesini başarılı bir şekilde tasarladım. Dosya seçildikten sonra

.btn-file { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.btn-file input[type=file] { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    font-size: 100px; 
 
    text-align: right; 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    outline: none; 
 
    background: white; 
 
    cursor: inherit; 
 
    display: block; 
 
}

<label class="btn btn-default btn-file"> 
 
    Browse 
 
    <input type="file" style="display: none;"> 
 
</label>

Ancak, javascript kullanmadan aşağıda örnekte olduğu gibi düğmenin yanındaki dosya adını gösteremez.

Herhangi öneri tarayıcılar geleneksel yükle düğmesini kullanarak bunu yapmak için?

Answer 1

göz düğmesi için z-index belirleyerek deneyebilirsiniz:

https://jsfiddle.net/wesfe5jy/3/

:

.btn-file { 
 
    position: absolute; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
    z-index: 2; 
 
    min-width: 84px; 
 
    min-height: 35px; 
 
    background-color: white; 
 
    border: 3px solid cyan; 
 
    top: 0; 
 
    left: 1; 
 
} 
 
input[type=file] { 
 
    float: left; 
 
    position: relative; 
 
    background: white; 
 
    cursor: pointer; 
 
    background-color: white; 
 
}

<label class="btn btn-default "> 
 
    <span class="btn-file">Browse</span> 
 
    <input type="file"> 
 
</label>

VEYA

başka yolu Bootstrap kullanmaktır