Stile CSS per un pulsante: utilizzando <input type = "button invece di <button>

Sto provando a modificare un pulsante utilizzando <input type="button"> anziché solo <button>. Con il codice che ho, il pulsante si estende completamente sullo schermo . voglio solo essere in grado di adattarsi al testo che è nel pulsante Tutte le ideeStile CSS per un pulsante: utilizzando <input type = "button invece di <button>

Vedere la jsFiddle Example o proseguire per il codice HTML:.?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>WTF</title> 
</head> 
<style type="text/css"> 
.button { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
} 
.button:hover { 
    background-color:rgba(255,204,0,0.8); 
} 
</style> 
<body> 
<div class="button"> 
    <input type="button" value="TELL ME MORE" onClick="document.location.reload(true)"> 
</div> 
</body>

fonte

2012-06-15 Varun Shetty

è necessario per lo stile di input non il div intorno ad esso –

Nel tuo .button CSS, prova display:inline-block. Vedi questo JSFiddle

fonte

2012-06-15 15:23:08 huzzah

vuoi qualcosa come il dato fiddle!

HTML

<div class="button"> 
    <input type="button" value="TELL ME MORE" onClick="document.location.reload(true)"> 
</div>

CSS

.button input[type="button"] { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
    display:block; 
    width:100%; 
} 
.button input[type="button"]:hover { 
    background-color:rgba(255,204,0,0.8); 
}

fonte

2012-06-15 15:21:24 SVS

Float:left ... Anche se presumo si vuole l'ingresso di essere in stile non il div?

.button input{ 
    color:#08233e;float:left; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
} 
.button input:hover{ 
    background-color:rgba(255,204,0,0.8); 
}

fonte

2012-06-15 15:21:53

il problema non è con il tasto, il problema è con il div. Come div s sono elementi di blocco, di default occupano tutta la larghezza del loro elemento genitore (come regola generale, sono abbastanza sicuro che ci sono alcune eccezioni se stai scherzando con diversi schemi di posizionamento in un documento che lo causerebbero occupare l'intera larghezza di un elemento superiore nella gerarchia).

Ad ogni modo, provare ad aggiungere float: left; alle regole per il selettore .button. Ciò farà sì che lo della classe button si adatti al pulsante e ti consentirebbe di avere più float div sulla stessa riga se volessi più div.button s.

fonte

2012-06-15 15:21:59 JAB

provare a mettere

Display:inline;

Nel CSS.

fonte

2012-06-15 15:22:04 Charlie

Vuoi davvero dare uno stile allo <div>? O vuoi dare uno stile allo <input type="button">? Si dovrebbe usare il selettore se desideri ricevere questi ultimi: anche

input[type=button] { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    /* ... other rules ... */ 
    cursor:pointer; 
} 

input[type=button]:hover { 
    background-color:rgba(255,204,0,0.8); 
}

See:

fonte

2012-06-15 15:24:11 Zeta

Stile CSS per un pulsante: utilizzando <input type = "button invece di <button>

risposta

Problemi correlati