Attualmente sto usando readonly = "readonly" per disabilitare i campi. Ora sto cercando di definire l'attributo usando i CSS. Ho provato a utilizzareCome attribuire un attributo readonly con i CSS?
input[readonly] {
/*styling info here*/
}
ma non funziona per qualche motivo. Ho anche provato
input[readonly='readonly'] {
/*styling info here*/
}
che non funziona neanche.
Come è possibile applicare l'attributo readonly con i CSS?
input[readonly]
{
background-color:blue;
}
https://curtistimson.co.uk/post/css/style-readonly-attribute-css/
Dovresti usare 'input [readonly]' invece che 'readonly' è un attributo booleano che non è progettato per avere un valore specifico. – BoltClock
@BoltClock Sì. Si prega di vedere la risoluzione nella risposta qui sotto. –
Come posso renderlo nuovamente scrivibile? Rimuovendo solo lo stile della classe? –
noti che textarea[readonly="readonly"] opere se si imposta readonly="readonly" in HTML, ma non funziona se si imposta la readOnly -attribute a true o "readonly" tramite JavaScript.
Per il selettore CSS per lavorare se si imposta readOnly con JavaScript è necessario utilizzare il selettore textarea[readonly].
stesso comportamento in Firefox e Chrome 14 20.
Per essere sul sicuro, io uso entrambi i selettori.
textarea[readonly="readonly"], textarea[readonly] {
...
}
Puoi anche usare semplicemente 'textarea [readonly]' invece - ogni 'textarea [readonly =" readonly " ] 'è garantito che corrisponda a questo – BoltClock
Forse dovresti provare DISABILITA.
input[type="text"]:disabled,
select:disabled,
textarea:disabled { color: #000; background-color: #ebebe4; }
Un elemento può essere in sola lettura ma abilitato.Questo escluderebbe tale elemento. – BoltClock
Gli elementi disabilitati non sempre inviano i dati al server, gli elementi di sola lettura lo fanno. –
utilizzare la seguente per funzionare in tutti i browser:
var readOnlyAttr = $('.textBoxClass').attr('readonly');
if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
$('.textBoxClass').addClass('locked');
}
Tranne dove JavaScript è disabilitato ... –
il 98% non lo è. –
Quindi, spero che il tuo pubblico di destinazione non sia in quel 2%. – Bacco
Per essere sicuri si consiglia di utilizzare sia ...
input[readonly], input[readonly="readonly"] {
/*styling info here*/
}
L'attributo di sola lettura è un "attributo booleano ", che può essere vuoto o" readonly "(gli unici valori validi). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute
Se si utilizza qualcosa come la funzione di jQuery .prop('readonly', true), si finirà per dover [readonly], mentre se si utilizza .attr("readonly", "readonly") allora avrete bisogno [readonly="readonly"].
Correzione: Hai solo bisogno di usare input[readonly]. Compreso lo input[readonly="readonly"] è ridondante. Vedere https://stackoverflow.com/a/19645203/1766230
Se si seleziona l'ingresso per l'id e quindi aggiungere il tag input[readonly="readonly"] nel css, qualcosa come:
#inputID input[readonly="readonly"] {
background-color: #000000;
}
che non funzionano. Devi selezionare una classe genitore o id an quindi l'input.Qualcosa di simile:
.parentClass, #parentID input[readonly="readonly"] {
background-color: #000000;
}
I miei 2 centesimi in attesa di nuovi biglietti al lavoro: D
"Se si seleziona l'input dall'ID" - che l'OP non è, quindi come è rilevante? Anche se fosse il caso, ti sbagli, devi solo rimuovere il combinatore discendente. – Quentin
AH ok vuoi dire che devo scrivere qualcosa come input [readonly = "readonly"] # inputID?/me pazzo .. hai ragione – softwareplay
Carichi di risposte qui, ma non ho visto quello che uso:
input[type="text"]:read-only { color: blue; }
Nota del dash nello pseudo selettore. Se l'input è readonly="false" lo prenderà anche perché questo selettore rileva la presenza di readonly indipendentemente dal valore. Tecnicamente false non è valido secondo le specifiche, ma Internet non è un mondo perfetto. Se avete bisogno di coprire quel caso, si può fare questo:
input[type="text"]:read-only:not([read-only="false"]) { color: blue; }
textarea funziona allo stesso modo:
textarea:read-only:not([read-only="false"]) { color: blue; }
Tenete a mente che HTML ora supporta non solo type="text", ma una sfilza di altri testuale tipi come , tel, email, date, time, url, ecc. Ognuno dovrebbe essere aggiunto al selettore.
Bello uno @IAmNaN –
Non funziona su IE. –
Neanche io. LOL Sì, hai ragione! Per adesso. ': sola lettura' e altri selettori di psuedo sono stati aggiunti allo standard W3C e possono essere utilizzati con le versioni di anteprima di IE 10 10547 e successive. – IAmNaN
input[readonly], input:read-only {
/* styling info here */
}
Shoud coprono tutti i casi per un campo di input di sola lettura ...
Quando viene usato 'input: read-only'? Non l'ho mai visto prima. – Luke
input: read-only è la "pseudo-classe della mutevolezza che mira a semplificare lo stile dello styling basandosi su attributi HTML disabilitati, readonly e contentedabili" Come menzionato qui, https://css-tricks.com/almanac/selectors/r/read -write-read /, varie implementazioni sono piuttosto fastidiose. – peater
Ci sono alcuni modi per farlo.
Il primo è il più utilizzato.
input[readonly] {
background-color: #dddddd;
}
Mentre quella sopra selezionerà tutti gli ingressi con readonly allegata, questo sarà selezionare solo quelli desiderati. Assicurati di sostituire demo con qualsiasi tipo tu voglia.
input[type="demo"]:read-only {
background-color: #dddddd;
}
Questo non è usato un bel po ':
input:read-only {
background-color: #dddddd;
}
Il selettore :read-only è supportato in Chrome, Opera e Safari. Firefox utilizza :-moz-read-only. IE non supporta il selettore :read-only.
È anche possibile utilizzare input[readonly="readonly"], ma questo è praticamente lo stesso di input[readonly], dalla mia esperienza.
'input [readonly]' dovrebbe funzionare. Assicurati che non venga sovrascritto da altri selettori più specifici altrove nel tuo foglio di stile. – BoltClock
se si desidera disabilitare, quindi utilizzare l'attributo disabilitato e non in sola lettura –
Ho notato che manchi un apostrofo nel secondo selettore. Dovrebbe essere inserito [readonly = 'readonly'] e funzionerà come input [readonly]. –