CSS-Styling für eine Schaltfläche: <input type = "button> anstelle von <button>

Ich versuche, eine Schaltfläche mit <input type="button"> statt nur <button> zu stylen. Mit dem Code, den ich habe, erstreckt sich die Schaltfläche den ganzen Weg über den Bildschirm . ich will nur in der Lage sein, es zu dem Text zu passen, die es in der Taste ist Irgendwelche IdeenCSS-Styling für eine Schaltfläche: <input type = "button> anstelle von <button>

die jsFiddle Example See oder auf den HTML weiter auf:.?

<!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>

Quelle

2012-06-15 Varun Shetty

Sie um ihn herum Eingang nicht das div stylen müssen –

Versuchen Sie in Ihrem .button CSS display:inline-block. Siehe hierzu JSFiddle

Quelle

2012-06-15 15:23:08 huzzah

wollen Sie etwas wie die gegebene 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); 
}

Quelle

2012-06-15 15:21:24 SVS

Float:left ... Obwohl ich nehme an, Sie die Eingabe gestylt werden möchten nicht das 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); 
}

Quelle

2012-06-15 15:21:53

Das Problem ist nicht mit der Taste ist das Problem mit den div. Da div s Blockelemente sind, nehmen sie standardmäßig die gesamte Breite ihres übergeordneten Elements ein (als allgemeine Regel; ich bin mir ziemlich sicher, dass es einige Ausnahmen gibt, wenn Sie verschiedene Positionierungsschemata in einem Dokument verwenden, die dies verursachen würden die volle Breite eines höheren Elements in der Hierarchie einnehmen).

Wie auch immer, versuchen Sie float: left; zu den Regeln für den .button Selektor hinzuzufügen. Das wird dazu führen, dass div mit der Klasse button um die Schaltfläche passt und es Ihnen ermöglichen würde, mehrere floated div s in derselben Zeile zu haben, wenn Sie mehr div.button s wollten.

Quelle

2012-06-15 15:21:59 JAB

Try

Display:inline;

Im CSS setzen.

Quelle

2012-06-15 15:22:04 Charlie

Möchten Sie wirklich die <div> stylen? Oder möchten Sie die <input type="button"> stylen? Sie sollten den richtigen Selektor verwenden, wenn Sie die letztere wollen:

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); 
}

Siehe auch:

Quelle

2012-06-15 15:24:11 Zeta

CSS-Styling für eine Schaltfläche: <input type = "button> anstelle von <button>

Antwort

Verwandte Themen