2016-07-24 3 views
1

Ziemlich einfach. Ich versuche, die Größe der einzelnen Eingabefelder zu ändern, aber wenn ich versuche, ihre Größe zu ändern (mit Klassen), ändert sich die Größe jeder Box. Nicht sicher, was falsch ist. Hier ist der Code:Die Größe des individuellen Eingabefeldes ändert sich nicht, ohne dass andere Größen geändert werden.

/* Centre the page */ 
 
    .body { 
 
     margin: 0 auto; 
 
     width: 450px; 
 
     top: 50px; 
 
     background-color: #444; 
 
     overflow: hidden; 
 
     position: relative; 
 
     display: block; 
 
     padding: 5px; 
 
    } 
 

 
    /* Centre the form within the page */ 
 
    form { 
 
     margin:0 auto; 
 
     text-align: center; 
 
    } 
 

 
    /* Style the text boxes */ 
 

 
    input, textarea { 
 
     height:30px; 
 
     background:#444; 
 
     border:1px solid white; 
 
     padding:10px; 
 
     font-size:1.4em; 
 
     color:white; 
 
     font-family: 'Lato', sans-serif; 
 
    } 
 

 
    input:focus, textarea:focus { 
 
     border:1px solid white; 
 
     color: white; 
 
    } 
 

 
    #submit { 
 
     height: 50px; 
 
     cursor: pointer; 
 
    } 
 

 
     #submit:hover { 
 
     background-color:#005f5f ; 
 
    } 
 

 
    .info { 
 
     size: 175px; 
 
    } 
 

 
    .message { 
 
     size: 400px; 
 
    }
<div class="body"> 
 
\t \t <form method="post" action="../php/index.php"> 
 
     
 
    \t \t <input class="info" name="name" placeholder="What's your name?"> 
 
      
 
    \t \t <input class="info" name="email" type="email" placeholder="What's your email?"> 
 
      
 
    \t \t <textarea class="message" name="message" placeholder="How can I help?"></textarea> 
 
      
 
    \t \t <input class="info" id="submit" name="submit" type="submit" value="Submit"> 
 
     
 
\t \t </form> 
 
\t </div>

Jede Hilfe würde geschätzt. Ich weiß, dass der Code unordentlich ist, ich habe alles versucht, also habe ich keine Zeit gehabt, es aufzuräumen. Danke im Voraus!

Antwort

0

size ist keine genaue Methode für die Größe Ihrer HTML-Eingabe according to the HTML specification. Ich würde empfehlen, z. B .: width: 10em oder width: 20px, um die Breite Ihrer Eingabe zu bemessen.

Für CSS könnten Sie die name-Attribute verwenden, um das Element anzugeben, das Sie mit einer anderen Breite haben möchten.

Mit verschiedenen class name für die verschiedenen Elemente funktioniert auch.

.info-long { 
    width: 130px; 
} 

.info-short { 
    width: 100px; 
} 

<input class="info-long" name="name" placeholder="What's your name?">    
<input class="info-short" name="email" type="email" placeholder="What's your email?"> 

Führen Sie die folgenden Abschnitte für ein Beispiel für unterschiedliche Breite Eingabeformular.

/* Centre the page */ 
 
    .body { 
 
     margin: 0 auto; 
 
     width: 450px; 
 
     top: 50px; 
 
     background-color: #444; 
 
     overflow: hidden; 
 
     position: relative; 
 
     display: block; 
 
     padding: 5px; 
 
    } 
 

 
    /* Centre the form within the page */ 
 
    form { 
 
     margin:0 auto; 
 
     text-align: center; 
 
    } 
 

 
    /* Style the text boxes */ 
 

 
    input, textarea { 
 
     height:30px; 
 
     background:#444; 
 
     border:1px solid white; 
 
     padding:10px; 
 
     font-size:1.4em; 
 
     color:white; 
 
     font-family: 'Lato', sans-serif; 
 
    } 
 

 
    input:focus, textarea:focus { 
 
     border:1px solid white; 
 
     color: white; 
 
    } 
 

 
    #submit { 
 
     height: 50px; 
 
     cursor: pointer; 
 
    } 
 

 
     #submit:hover { 
 
     background-color:#005f5f ; 
 
    } 
 

 
    .info[name="name"] { 
 
     width: 13em; 
 
    } 
 

 
    .info[name='email'] { 
 
     width: 12em; 
 
    } 
 

 
    .message { 
 
     width: 400px; 
 
    }
<div class="body"> 
 
\t \t <form method="post" action="../php/index.php"> 
 
     
 
    \t \t <input class="info" name="name" placeholder="What's your name?"> 
 
      
 
    \t \t <input class="info" name="email" type="email" placeholder="What's your email?"> 
 
      
 
    \t \t <textarea class="message" name="message" placeholder="How can I help?"></textarea> 
 
      
 
    \t \t <input class="info" id="submit" name="submit" type="submit" value="Submit"> 
 
     
 
\t \t </form> 
 
\t </div>

0

Die Klasse für alle Ihre Eingaben sind die gleichen, dh. Info. Alle Eingaben, die dieselbe Klasse haben, erhalten die gleichen Stile. So wird Ihre Größenänderung für alle von ihnen gelten. Geben Sie der Eingabe, für die Sie die Größe ändern möchten, eine andere Klasse, oder geben Sie eine ID vor, und ändern Sie dann die Größe mithilfe von CSS. Da info nur die angegebene Breite hat, ändern sich andere Aspekte nicht.

Verwandte Themen