it-swarm.com.de

CSS-Styling für eine Schaltfläche: Verwenden Sie <input type = "button> anstatt <button>

Ich versuche, eine Schaltfläche mit <input type="button"> anstelle von <button> zu gestalten. Mit dem Code, den ich habe, erstreckt sich der Button über den gesamten Bildschirm. Ich möchte nur in der Lage sein, es an den Text anzupassen, der in der Schaltfläche enthalten ist. Irgendwelche Ideen?

Siehe das jsFiddle-Beispiel oder weiter zum HTML-Code:

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

26
Varun Shetty

Versuchen Sie in Ihrem .button-CSS display:inline-block. Sehen Sie diese JSFiddle

10
huzzah

Möchten Sie den <div> wirklich stylen? Oder möchten Sie den <input type="button"> formatieren? Sie sollten den richtigen Selektor verwenden, wenn Sie den letzteren wünschen:

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:

62
Zeta

Wollen Sie etwas wie die gegebene Geige!


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

Float:left... Obwohl ich davon ausgehe, dass Sie möchten, dass die Eingabe nicht als div formatiert wird? 

.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);
}
1
Mike Hague

Das Problem betrifft nicht die Schaltfläche, sondern die div. Da divs Blockelemente sind, nehmen sie standardmäßig die gesamte Breite des übergeordneten Elements ein (als allgemeine Regel; ich bin mir ziemlich sicher, dass es einige Ausnahmen gibt, wenn Sie mit unterschiedlichen Positionierungsschemas in einem Dokument herumspielen, die dazu führen könnten die volle Breite eines höheren Elements in der Hierarchie einnehmen).

Versuchen Sie auf jeden Fall, float: left; zu den Regeln für den .button-Selektor hinzuzufügen. Dies führt dazu, dass die Variable div mit der Klasse button um die Schaltfläche passt und dass Sie mehrere Floating-Variablen divs in derselben Zeile haben können, wenn Sie mehr div.buttons wünschen.

0
JAB

Versuchen Sie es zu setzen

Display:inline;

In der CSS.

0
Charlie