單獨的輸入框不會調整大小而不需要調整大小

Question

非常簡單。我試圖調整個別輸入框的大小，但是當我嘗試調整它們的大小（使用類）時，它會調整每個框的大小。不知道什麼是錯的。下面的代碼：

/* 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>

任何幫助，將不勝感激。我知道代碼很混亂，我一直在嘗試一切，所以我沒有時間清理它。提前致謝！

Answer 1

size是不是一個確定您的html輸入大小的確切方法according to the HTML specification。 我會推薦使用例如：width: 10em或width: 20px來確定輸入的寬度。

對於CSS，您可以使用name屬性來指定要使用不同寬度的元素。

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

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

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

不同的class name爲不同的元素也有效。

.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?"> 

對於不同的寬度輸入表單，運行下面的代碼片段作爲示例。

/* 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>

Answer 2

所有輸入的類都是相同的，即。信息。所有具有相同類別的輸入將獲得相同的樣式。因此，您的調整大小將適用於所有輸入。給你想要調整大小的輸入提供一個不同的類，或者給出一個id，然後用CSS調整它的大小。由於info只有在其內部指定的寬度，所以其他方面不會改變。