Voglio solo lo stile di:Come fare un "<input type =" file "/>" sembra un collegamento con i CSS?
<input type="file" value="Choose the file" />
assomiglia:
<a href="#">Choose the file</a>
usando solo CSS.
È possibile?
Sarà probabilmente bisogno di qualche messa a punto per le dimensioni, hover stato ecc, ma perché non fare:
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>La premessa fondamentale è che il input type=file dovrebbe essere posizionato in modo assoluto il 'sostituzione' con la sua opacità impostata su zero in modo da intrappolare ancora il normale comportamento di interazione dell'utente.
Puoi provare a utilizzare questo hack "sporco":
input {
opacity: 0;
position: relative;
left: -100px
}
L'inserimento di un 'input' all'interno di un tag' a' non è valido. – putvande
per favore aggiungi qualche spiegazione al tuo codice, mostrando come risolve il problema, questo aiuterà gli altri in futuro –
Come sull'utilizzo label invece di anchor e si collega il label con input[type="file"] via for:
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">Nota: safari ha problemi con l'utilizzo display:none-input[type="file"]
In questa discussione ci sono hack e soluzioni molto intelligenti, ma questa è di gran lunga la risposta più elegante IMO. –
Ho sempre avuto problemi con lo stile 'input [type =" file "]' e questa soluzione è la migliore, IMHO. – Vucko
Sì, questa è la risposta corretta. Attaccare con elementi di forma; pulito e semplice Non sono necessari hack. – misterManSam
Ecco un'altra soluzione simile al precedente, ma ho separare il tag input e mostrare il collegamento.
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;
}
E l'html
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<a href="">browse file</a>
</div>
</div>
Ecco la fiddle
È possibile aggiungere un'etichetta legata all'ingresso (e si dovrebbe per l'accessibilità in ogni caso, tanto più che si ha realmente bisogno di nascondere il ingresso). Quindi è possibile impostare opacity dell'input su 0 e renderlo position:absolute in modo che non influenzi la pagina. Potresti nasconderlo, ma penso che alcuni browser non attivino la funzionalità dell'etichetta, quindi non sarai in grado di scegliere un file.
Puoi quindi modellare l'etichetta come vuoi, o anche avvolgerla in un tag a in modo che si comporti esattamente come gli altri collegamenti sulla tua pagina.
Lo svantaggio di nascondere l'input è che non sarà possibile visualizzare il file selezionato.Se avete bisogno di fare che si può mostrare in etichetta con un semplice po 'di jQuery:
$('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>
Per esperienza, questo è un elemento molto difficile da stile, in particolare nelle versioni precedenti del browser. – Paddy
Vuoi modellare il pulsante 'file' come collegamento? –
Come questo? http://stackoverflow.com/a/18716005/1364685 – chris