Sto provando ad avere alcuni input di file e li faccio vedere solo se il precedente è stato riempito. Questo può usare anche il css 3.Esiste un selettore CSS per rilevare se un input ha un file di testo selezionato?
per selezionare i campi vuoti si può provare
input[type=file][value=""] {
background-color: red;
}
ho testato su jsfiddle. C'è almeno, avevo bisogno di definire un attributo valore vuoto sul tag input per farlo funzionare
<input type="file" id="test" value="">
Utilizzando l'operatore '+', come hai fatto nel tuo esempio sarebbe partita due ingressi di file separati, uno a destra dopo l'altro. Non esamina due attributi dello stesso tag che sembra desiderare.
Per espandere il commento di Yi Jiang, i selettori rispetto all'attributo "valore" non noteranno modifiche alla proprietà "valore". L'attributo "value" è associato allo "defaultValue" property, mentre lo "value" property non è associato a nessun attributo (grazie a porneL per indicare questo).
Nota esiste una relazione simile con l'attributo "checked" e "defaultChecked" e "checked"; se si utilizza un selettore di attributo [checked] anziché la pseudo-classe :checked, non si vedranno cambi di stile quando lo stato di una casella di controllo cambia. A differenza della famiglia "spuntata", "valore" non ha una pseudo-classe corrispondente che potresti usare.
provare la seguente pagina di prova:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dynamic attribute selectors</title>
<style type="text/css">
input:not([value]), div:not([value]) {
background-color: #F88;
}
input[value], div[value] {
border: 5px solid #8F8;
}
input[value=""], div[value=""] {
border: 5px solid #F8F;
}
input:not([value=""]), div:not([value=""]) {
color: blue;
border-style: dashed;
}
*.big {
font-size: 200%;
}
</style>
<script>
function getElt() {
var id=prompt("Enter ID of element", "d1");
if (id) {
return document.getElementById(id);
} else {
return {className: ''};
}
}
function embiggen() {
getElt().className="big";
return false;
}
function smallify() {
getElt().className="";
return false;
}
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<div id="d1">no value</div>
<div id="d2" value="">empty value</div>
<div id="d3" value="some">some value</div>
<p><label for="foo">foo:</label> <input name="foo" id="foo" /></p>
<p><label for="bam">bam:</label> <input name="bam" id="bam" value="bug-AWWK" /></p>
<p><label for="file">File to upload:</label> <input type="file" name="file" id="file" onchange="setValueAttr(this)"/></p>
<input type="button" value="Embiggen" onclick="return embiggen()" />
<input type="button" value="Smallify" onclick="return smallify()" />
</body>
</html>
La modifica del valore di nulla e lo stile non cambierà. Cambia la classe di qualsiasi cosa e lo stile cambierà. Se aggiungi la seguente funzione JS e la associ a un evento change su un input, lo stile di sfondo cambierà.
function bindValue(elt) {
var oldVal=elt.getAttribute('value');
elt.setAttribute('value', elt.value);
var newVal=elt.getAttribute('value');
if (oldVal != newVal) {
alert('Had to change value from "'+oldVal+'" to "'+newVal+'"');
}
}
Questo associa la proprietà "valore" per l'attributo "value", quindi gli aggiornamenti alla prima da input dell'utente si propagheranno a quest'ultimo (impostazione di programmazione la proprietà "valore" non causerà un evento di modifica) .
Nell'esaminare le proprietà JS degli input di file prima e dopo (utilizzando il seguente script), l'unico con un cambiamento apprezzabile era "value". Da questo, dubito che ci siano altri attributi HTML che cambiano e possano quindi essere usati in un selettore di attributi.
<script>
var file = {blank: {}, diff: {}};
var fInput = document.getElementById('file');
for (p in fInput) {
try {
file.blank[p] = fInput[p];
} catch (err) {
file.blank[p] = "Error: setting '"+p+"' resulted in '"+err+"'";
}
}
function fileDiff() {
for (p in fInput) {
try {
if (file.blank[p] != fInput[p]) {
file.diff[p] = {orig: file.blank[p], now: fInput[p]};
}
} catch (err) {
//file.diff[p] = "Error: accessing '"+p+"' resulted in '"+err+"'";
}
}
}
if (fInput.addEventListener) {
fInput.addEventListener('change', fileDiff, false);
} else if (fInput.attachEvent) {
fInput.attachEvent('onchange', fileDiff);
} else {
fInput.onchange = fileDiff;
}
</script>
È possibile incidere insieme qualcosa utilizzando un collegamento a un frammento inesistente e la classe :visited pseudo, ma è piuttosto eclatanti.
<style>
a input {
display: none;
}
:not(a) + a input,
a:visited + a input
{
display: block /* or "inline" */ ;
}
</style>
...
<a href="#asuhacrpbt"><input type="file" ... /></a>
<a href="#cmupbnhhpw"><input type="file" ... /></a>
<a href="#mcltahcrlh"><input type="file" ... /></a>
Avresti bisogno di generare obiettivi non visitati per i collegamenti ogni volta che la pagina viene caricata. Dal momento che dovresti farlo lato server, non potresti farlo con assoluta certezza, anche se potresti avere la probabilità di generare un target precedentemente visitato arbitrariamente vicino a 0. Inoltre non funziona su tutti i browser, come Safari. Ho il sospetto che questo è dovuto al seguente da CSS2 e CSS3:
Nota: E 'possibile per gli autori dei fogli di stile di abusare del: link e: visited pseudo-classi per determinare quali siti un utente ha visitato senza che l'utente del consenso.
UAs può quindi considerare tutti i collegamenti come collegamenti non visitati o implementare altre misure per preservare la privacy dell'utente durante il rendering dei collegamenti visitati e non visitati in modo diverso.
Si potrebbe essere in grado di hackerare qualcosa insieme usando altri selettori su altri elementi, ma sospetto che questo non possa essere fatto in modo pulito.
Per chiarire: i selettori che corrispondono all''attributo 'value' * sono * sempre rivalutati in modo dinamico ogni volta che l'attributo' value' * * cambia e funziona in tutti i browser che supportano i selettori CSS2. Il CSS non fa eccezione qui. La parte confusa è che l'attributo 'value' * * è ** non aggiornato ** in risposta a' 'modifiche. L'attributo 'valore' * * si associa alla proprietà DOM * di defaultValue', e la proprietà' value' * * non ha un attributo DOM * corrispondente. JS e HTML/CSS sono due mondi diversi. – Kornel
Bene, funziona se il valore di defaultValue viene aggiornato tramite JavaScript (jQuery per semplificazione): 'jQuery ('input [tipo = file]') .change (function (e) {this.defaultValue = this.value;}) ; ' – feeela
Un esempio del valore di migliaia parole: Display X input, one at a time
L'idea è semplice, se un ingresso impostabile è vuota, è valido. Da lì, tutto ciò che devi fare è impostare tutti gli input come richiesto e utilizzare la pseudo classe: invalid. Dovrebbe funzionare alla grande anche con l'etichetta.
Oh, incredibile! –
lo svantaggio di questo è che è necessario riempire tutti gli input, rendendolo invidiabile, non è davvero dinamico, per quanto ho studiato questo non può essere completamente realizzato senza JS – aleation
Aggiunta di novalidate al tag del modulo consente di inviare il modulo con input vuoto. Non sono sicuro se ne valga la pena. Il numero dinamico di input non sarà comunque possibile senza JS. – gkr
Quello che voglio è mostrare solo 1 input all'inizio, poi una volta che si è selezionato un file, mostrare il secondo e così via. Ho testato il tuo suggerimento e non cambia una volta selezionato il file. Guarda solo il valore iniziale dell'attributo "valore" e non fa nulla quando cambia. – manixrock
@manixrock I CSS non possono essere usati in questo modo - i selettori vengono valutati solo una volta quando la pagina viene caricata, e il gioco è fatto. Avrai bisogno di Javascript per questo –
@Yi Jiang - Questo non è proprio vero: 'input {margin-left: 10px; } input: checked {margin-left: 20px; } '; aggiungi un input alla casella di controllo e, quando lo controlli, si sposterà a destra; deselezionalo e si sposterà a sinistra; ciò dimostra che il css viene valutato in fase di esecuzione sulla pagina, non solo durante il caricamento. Sto cercando qualcosa di simile, ma adattato per gli input dei file. – manixrock