CSS per nascondere il testo del valore del PULSANTE INGRESSO
https://stackoverflow.com/questions/600438
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Attualmente sto disegnando un elemento <input type='button'/> con il seguente CSS:
background: transparent url(someimage);
color: transparent;
Voglio che il pulsante sia mostrato come immagine, ma non voglio che il testo value venga visualizzato sopra di esso. Questo funziona bene per Firefox come previsto. Tuttavia, su Internet Explorer 6 e Internet Explorer 7 posso ancora vedere il testo.
Ho provato tutti i tipi di trucchi per nascondere il testo, ma senza successo. Esiste una soluzione per far funzionare Internet Explorer?
(Sono costretto a usare type=button perché questo è un modulo Drupal e la sua API del modulo non supporta il tipo di immagine.)
Soluzione
Perché includi l'attributo value? Dalla memoria, non è necessario specificarlo (anche se gli standard HTML potrebbero dire di sì, non ne sono sicuro). Se hai bisogno di un attributo value="", perché non indicare <=>?
Se segui questo approccio, il tuo CSS avrà bisogno di proprietà aggiuntive per l'altezza e la larghezza dell'immagine di sfondo.
Altri suggerimenti
Uso
button {text-indent:-9999px;}
* html button{font-size:0;display:block;line-height:0} /* ie6 */
*+html button{font-size:0;display:block;line-height:0} /* ie7 */
Ho avuto il problema opposto (ha funzionato in Internet Explorer, ma non in Firefox). Per Internet Explorer, è necessario aggiungere l'imbottitura sinistra e per Firefox, è necessario aggiungere un colore trasparente. Ecco quindi la nostra soluzione combinata per un pulsante icona 16px x 16px:
input.iconButton
{
font-size: 1em;
color: transparent; /* Fix for Firefox */
border-style: none;
border-width: 0;
padding: 0 0 0 16px !important; /* Fix for Internet Explorer */
text-align: left;
width: 16px;
height: 16px;
line-height: 1 !important;
background: transparent url(../images/button.gif) no-repeat scroll 0 0;
overflow: hidden;
cursor: pointer;
}
bene:
font-size: 0;
line-height: 0;
funziona alla grande per me!
Hai provato a impostare la proprietà di rientro del testo su qualcosa come -999em? Questo è un buon modo per "nascondere" il testo.
Oppure puoi impostare la dimensione del carattere su 0, che funzionerebbe anche.
http://www.productivedreams.com / ie-non-intepreting-text-trattino-on-inviare-pulsanti /
La differenza che alcuni di voi vedono nelle soluzioni che funzionano o meno nei diversi IE possono essere dovute all'attivazione o alla disattivazione della modalità di compatibilità. In IE8, il rientro del testo funziona bene a meno che non sia attivata la modalità di compatibilità . Se la modalità di compatibilità è attiva, la dimensione del carattere e l'altezza della linea fanno il trucco ma possono rovinare il display di Firefox.
Quindi possiamo usare un hack css per permettere a Firefox di ignorare la nostra regola cioè ... in questo modo ...
text-indent:-9999px;
*font-size: 0px; line-height: 0;
Utilizza le istruzioni condizionali nella parte superiore del documento HTML:
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Quindi nel CSS aggiungi
.ie7 button { font-size:0;display:block;line-height:0 }
Tratto da HTML5 Boilerplate - in particolare paulirish.com/ 2008 / CSS-hack condizionali-fogli di stile-vs--risposta-non /
L'ho fatto notare da qualche parte:
aggiungendo text-transform all'input per rimuoverlo
input.button {
text-indent:-9999px;
text-transform:capitalize;
}
Scrivi nel tuo file CSS:
#your_button_id
{
color: transparent;
}
L'applicazione font-size: 0.1px; al pulsante funziona per me in Firefox, Internet Explorer 6, Internet Explorer 7 e Safari. Nessuna delle altre soluzioni che ho trovato ha funzionato su tutti i browser.
overflow:hidden e padding-left stanno funzionando bene per me.
Per Firefox:
width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;
Per gli IE:
padding-left:1000px;
Funziona in Firefox 3, Internet Explorer 8, modalità di compatibilità di Internet Explorer 8, Opera e Safari.
* Nota: la cella della tabella che contiene questo ha padding:0 e text-align:center.
background: none;
background-image: url(../images/image.gif);
background-repeat:no-repeat;
overflow:hidden;
border: NONE;
width: 41px; /*width of image*/
height: 19px; /*height of image*/
font-size: 0;
padding: 0 0 0 41px;
cursor:pointer;
Ho avuto lo stesso problema. E come molti altri post segnalati: il trucco del padding funziona solo per IE.
font-size:0px mostra ancora alcuni piccoli punti.
L'unica cosa che ha funzionato per me è fare il contrario
font-size:999px
... ma avevo solo pulsanti di 25x25 pixel.
color:transparent; /* For FF */
*padding-left:1000px ; /* FOR IE6,IE7 */
Questo per me ha funzionato meglio:
HTML :
<input type="submit"/>
CSS :
input[type=submit] {
background: url(http://yourURLhere) no-repeat;
border: 0;
display: block;
font-size:0;
height: 38px;
width: 171px;
}
Se non si imposta value sul <input type="submit"/> inserirà il testo predefinito " Invia " all'interno del tuo pulsante. Quindi, basta impostare font-size: 0; sull'invio e quindi assicurarsi di impostare height e width per il tipo di input in modo che l'immagine venga visualizzata. NON dimenticare le query multimediali per l'invio se ne hai bisogno, ad esempio:
CSS:
@media (min-width:600px) {
input[type=submit] {
width:200px;
height: 44px;
}
}
Ciò significa che quando lo schermo ha una larghezza di almeno 600 px o superiore, il pulsante cambierà le sue dimensioni
Invece, basta fare un hook_form_alter e rendere il pulsante un pulsante immagine e il gioco è fatto!
color:transparent; e quindi anche qualsiasi proprietà text-transform fa il trucco.
Ad esempio:
color: transparent;
text-transform: uppercase;
