Esiste comunque la possibilità di modificare il valore di un input di testo (il testo predefinito visualizzato) con css?Modificare il valore di un input di testo con css?
Im optomizing un sito per dispositivi mobili e voglio che il testo 'cerca questo sito' sia abbreviato in 'cerca'. Grazie
Questo non è esattamente ciò che è per CSS.
CSS è per lo styling dei contenuti; HTML è per il contenuto stesso.
Se è necessario modificare il contenuto dopo che l'HTML è stato caricato, questo è ciò che Javascript è per.
Quindi la vera risposta alla tua domanda è: modificare direttamente l'HTML o utilizzare Javascript.
Ci sono alcune cose che puoi fare con i CSS che influenzano il contenuto, come ad esempio l'aggiunta di testo aggiuntivo in-davanti o dietro un elemento utilizzando i :before e :after pseudo-selettori, ma che non vi aiuterà a questo caso e non dovrebbe essere utilizzato per il tipo di lavoro di modifica del contenuto di cui si sta parlando.
A proposito, un po 'fuori tema, ma se si sta utilizzando il valore del campo di input come testo di prompt, si consiglia di esaminare l'attributo HTML5 placeholder. Anche questo non affronta la tua domanda, ma sembra che potrebbe essere qualcosa che potrebbe esserti utile.
Beh, se * completamente * ignori la proprietà CSS 'content', suppongo sia vero. –
@RubenMartinezJr .: Non ho ignorato 'content'; si applica solo ai selettori come ': before' e questo è nella risposta. Ma il punto è che anche se puoi farlo, non dovresti: inserire contenuti significativi nei CSS è una cattiva pratica. Mette a tacere la separazione tra stile e contenuto per cui è stato progettato il CSS, e ha problemi di usabilità per gli utenti finali (ad esempio non può essere copiato o incollato, non viene letto dagli screen reader per gli utenti ciechi, ecc.). La linea di fondo è che la proprietà 'content' in': before' e ': after' dovrebbe essere usata solo per gli effetti spot, non per il contenuto del sito reale. – Spudley
No, il CSS non può modificare l'attributo value di uno input o in effetti alcun attributo di alcun elemento.
Se si desidera modificare il valore, utilizzare l'attributo "valore" HTML;
esempio:
<input type="submit" value="ENVIAR">
che cambierà il default "submit" value a "inviare"
in ritardo alla festa, ma mediante l'attributo "contenuto", all'interno element:before compirà quello che vi serve come visto in http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_string
ho potuto manipolare un valore contenuto pulsante tramite jQuery toggleClass, la commutazione tra le seguenti classi:
.open_button:before{
content:"open";
}
.close_button:before{
content: "close";
}
Capisco i problemi, ma mi sento come toggleClass offre un'eleganza che giustifica il trucco CSS. Altrimenti si userebbe una funzione di commutazione con le funzioni di switch css annidate. Personalmente penso che evitare le funzioni jQuery annidate sia più bello.
Per me la soluzione è stata
<button type="submit" class="mybutton" name="add">
<span class="add">Add new</span>
</button>
quindi il css sarà:
.mybutton:hover .add:after{content="0"}
così facile, basta digitare ad esempio:
button {
color: red;
font-family: sans-serif;
}Ecco, i pulsanti prendono tutti gli ingressi con i valori con ad esempio presentare/reset/.etc ..
Non vuole cambiare colore e carattere. –
Questa soluzione è po 'difficile,
ma è sempre lavoro per me.
/*CSS Code*/
@media screen and (max-width: 768px) {
.showondesktop {
display: none !important; }
}
#showonmobile {
display:none;
}
@media screen and (max-width: 767px) {
#showonmobile {
display:block; }
}<!--HTML Code->
<div class="showondesktop"> search this site </div>
<div id="showonmobile"> search </div>Quando il sito è visitato da Mobile sarà visualizzato "ricerca", ma quando visitata dal Desktop verrà visualizzato "Cerca nel sito". Anteprima
Image:
Hai pensato di usare Javascript per rilevare il browser degli utenti e modificare i campi? http://www.w3schools.com/js/js_browser.asp – Waltzy
@Waltzy - non rileva il browser stesso; è una cattiva pratica Invece, rileva le capacità del browser usando strumenti come Modernizr; è più affidabile e ti offre un controllo più preciso. Ci sono pochissimi casi in cui il rilevamento del browser è necessario perché altre tecniche non funzionano, ma questo non è uno di questi. – Spudley
@Spudley Cheers per l'heads up, lo terrò a mente. – Waltzy