Sadece tarzında istiyorum:Bir "<input type =" dosya "/>" nasıl yapılır CSS ile bir bağlantıya benziyor?
<a href="#">Choose the file</a>
sadece kullanarak css:
<input type="file" value="Choose the file" />
benziyor.
Mümkün mü?
Muhtemelen vb durumunu gelin boyutu için bazı ince ayar gerektiren, ama neden yapmayacağım:
span {
cursor: pointer;
}
a {
position: relative;
overflow: hidden;
}
span:hover a {
color: red;
}
a+input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}<span><a href='#'>Link!</a><input type='file' /><span>temel önermesi input type=file kesinlikle üzerinde konumlandırılmalıdır gerektiğidir "Değiştirme", opaklığı sıfır olarak ayarlanmış olduğundan normal kullanıcı etkileşimi davranışını yakalar.
:
input {
opacity: 0;
position: relative;
left: -100px
}
'a' etiketinin içine 'input' koymak geçersiz. – putvande
Lütfen kodunuza bazı problemler ekleyin, sorunun nasıl çözüldüğünü gösterir, bu gelecekte başkalarına yardımcı olacaktır –
Nasıl yerine anchor ait label kullanımı hakkında ve for aracılığıyla input[type="file"] ile label bağlamak:
label{
color: blue;
cursor: pointer;
}
label:hover{
text-decoration: underline;
}
#file_input_id{
display:none;
}<label for="file_input_id">I'm a wannabe link</label>
<input type="file" id="file_input_id">Not: safari İşte yukarıdaki benzer başka bir çözüm ama giriş etiketi ayırmak ve bunun yerine bağlantıyı göstermek input[type="file"]
Bu iş parçacığında çok akıllı korsanlıklar ve çözüm yolları vardır, ancak bu IMO'nun en zarif cevabıdır. –
"input [type =" file "]' stili ile ilgili her zaman sorun yaşadım ve bu çözüm IMHO için en iyisi. – Vucko
Evet, bu doğru cevap. Form elemanları ile yapıştırma; temiz ve basit. Hack gerekmiyor. – misterManSam
için display:none kullanarak sorunları var.
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
Ve html İşte
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<a href="">browse file</a>
</div>
</div>
olduğunu fiddle
gerçekten gizlemek gerek, özellikle de Sen girişine bağlanmış bir etiket ekleyebilir (ve yine erişilebilirlik için gereken giriş). Ardından, opacity girişini 0 olarak ayarlayabilir ve position:absolute'u sayfanızı etkilemeyecek şekilde ayarlayabilirsiniz. Saklayabilirsin, ama bazı tarayıcılar etiket işlevini tetiklemeyecek diye bir dosya seçemeyeceksiniz.
Ardından, etiketi istediğiniz şekilde stilleyebilir veya bir a etiketine sarabilirsiniz; böylece sayfanızdaki diğer bağlantılar gibi davranır.
Girdi saklamanın dezavantajı, seçilen dosyayı göremeyeceğinizdir.
$('input[type="file"]').change(function() {
// find the label for the currrent file input
$('label[for="' + this.id + '"]').text('Choose the file - ' + $(this).val());
});input[type=file] {
position: absolute;
top: 0;
right: 0;
filter: alpha(opacity=0);
opacity: 0;
margin: 0;
padding: 0;
}
a > label {
/* inherit the hand cursor from the a tag */
cursor:inherit;
}
a:hover {
color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
<input id="thefile" type="file" value="Choose the file" />
<a href="#"><label for="thefile">Choose the file</label></a>
</form>
, bu tarz çok sert eleman özellikle eski sürümlerinde, şudur: Eğer Jquery basit biraz etikette gösterebilmemiz bunu gerekiyorsa tarayıcı. – Paddy
'file'-button'ı bağlantı olarak mı kullanmak istiyorsunuz? –
Bunu beğendiniz mi? http://stackoverflow.com/a/18716005/1364685 – chris