如何更改搜索框的寬度/高度

我在創建此表單時遇到了問題。我開始研究一箇舊項目，並決定重新開始並取消代碼。該項目是對Google主頁設計的再創造。我想有一個確切的設計，除了一些不是真正需要的東西。搜索框（表格）移動到我想要的位置，但由於新的標誌，我必須在動畫期間將我的搜索框放在手上。問題是我的座標是我想要的，但高度和寬度不會改變。這是我的整個代碼：如何更改搜索框的寬度/高度

<!DOCTYPE HTML> 
<HTML> 
    <head> 
     <title>Google</title> 
     <style> 
      .GoogleLogo { 
       position:absolute; 
       TOP:125px; 
       LEFT:575px; 
      } 

      .SearchBar { 
       position: absolute; 
       top: 355px; 
       left: 575px; 
       height: 30px; 
       width: 50px; 
      } 

     </style> 
    </head> 
    <body> 

     <div class="GoogleLogo"> 
      <a href="https://www.google.com/?gws_rd=ssl#q=Google+logo+history&hl=en&oi=ddle"><img src="../../Pictures/Google2.gif" alt="Google" width="400" height="231" border="0" /></a> 
     </div> 

     <div class="SearchBar"> 
      <form> 
          <input type="text" placeholder="Search..." required> 
      </form> 
     </div> 

    </body> 
</HTML>

有沒有辦法改變高度和寬度，而不會'損壞'任何東西。我希望班級.SearchBar能夠響應我改變高度和寬度的編碼。我將它更改爲550像素，但它仍然不起作用，感謝您花時間閱讀此內容。

來源

2015-09-02 AnotherProgrammer

爲了改變實際的輸入元素，你需要，以及...改變實際輸入元素的寬度。你已經改變了div，但不是輸入。

.SearchBar { 
    position: absolute; 
    top: 355px; 
    left: 575px; 
} 

.SearchBar input { 
    height: 30px; 
    width: 50px; 
}

來源

2015-09-02 15:19:22

謝謝你向我解釋這個，我永遠不會知道它。再次感謝你，我很高興能夠從這個社區找到答案。 – AnotherProgrammer

如何更改搜索框的寬度/高度

回答

相關問題