Come modificare la larghezza/altezza di una casella di ricerca

Ho problemi con questo modulo che stavo creando. Ho iniziato a lavorare su un vecchio progetto e ho deciso di ricominciare da capo e scartare il codice. Il progetto è stato una ricreazione del design della home page di Google. Volevo avere un design esatto, ad eccezione di alcune cose che non sono veramente necessarie. La casella di ricerca (modulo) si è spostata esattamente dove volevo, ma a causa del nuovo logo, ho dovuto posizionare la mia casella di ricerca sulla mano durante l'animazione. Il problema è che le mie coordinate sono come volevo, ma l'altezza e la larghezza non cambieranno. Questa è tutta la mia intero codice:Come modificare la larghezza/altezza di una casella di ricerca

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

Esiste un modo per modificare l'altezza e la larghezza senza nulla 'dannoso'. Voglio che la classe, .SearchBar, risponda alla mia codifica di cui ho modificato l'altezza e la larghezza. L'ho cambiato a 550 pixel, e ancora non funziona, grazie per aver dedicato del tempo a leggere questo.

fonte

2015-09-02 AnotherProgrammer

Per modificare il con dell'elemento di ingresso effettivo, è necessario, beh ... modificare la larghezza dell'elemento di ingresso effettivo. Hai cambiato il div, ma non l'input.

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

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

fonte

2015-09-02 15:19:22

Grazie per avermelo spiegato, non l'avrei mai saputo. Grazie, ancora una volta, sono felice di essere riuscito a trovare una risposta da questa comunità. – AnotherProgrammer

Come modificare la larghezza/altezza di una casella di ricerca

risposta

Problemi correlati