Avatar billede Jan Rasmussen Juniormester
19. september 2019 - 16:10 Der er 10 kommentarer

Søgeboks på hjemmeside kode størrelses problem

hej jeg har denne nedenstående kode som virke fint som den skal, som en Google søge boks til min hjemmeside Men øv øv øv jeg kan ikke ændre på størrelsen af søgeboksen og knappen search og ej heller farven på knappen - Tja lidt ligesom jeg gerne ville have runde hjørner 8 i størrelse - Men lige meget hvad jeg gør så ændre søgeboksen ikke udseende dog med denne undtagelse hvis jeg skifter der hvor der står #808080 så kan jeg ændre farven på tekst inde i boksen. Er der nogen som kan hjælpe ? Jeg har prøvet at ændre 4px til 10 px og width til 30  q size til 40 samt name size til 40 MVH Jan
Her er koden:

<form method="get" action="http://www.google.com/search">
<div style="padding:4px;width:15em;">
  <table border="0" align="center" cellpadding="0">
  <tr><td>
  <input type="text"  name="q" size="25" style="color:#808080;"
  maxlength="255" value="Google site search"
  onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
  <input type="submit" value="Go!" />
  <input type="hidden" name="sitesearch" value="yoursite.com" /></td></tr>
  </table>
  </div>
</form>
Avatar billede keysersoze Guru
19. september 2019 - 17:08 #1
hvis du ændrer 4px til 10px er det jo bare din div du tilpasser og ikke størrelsen på din input - fjern size på input text og sæt en specifik width i style-attributten og sæt så også en style-attribut på din input submit og style her efter behov.
Avatar billede Jan Rasmussen Juniormester
19. september 2019 - 17:45 #2
Hej Keysersoze - Tak for dit input - Jeg har nu fået lavet, koden - Og jeg aner intet om koder har bare ledt på nettet i timevis. Meeen en sidste ting hvordan for jeg lavet søg knappen med lidt runde hjørner - Hvis nogen har løsningen så skriv meget gerne hvor og hvad jeg skal sætte ind i kode. Her er koden som virker ok

<form method="get" action="http://www.google.com/search">
<div style="padding:1px;width:50em;">
  <table border="0" align="left" cellpadding="40">
  <tr><td>
  <input type="text"  style="font-family:times new roman,serif; font-size:12pt; font-weight:" name="q" size="45" style="color:#808080;"
  maxlength="225"    value="Skriv hvad du søger her..." 
  onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
  <input type="submit" value="    Google søg    "  style="font-family:times new roman,serif; font-size:12pt; font-weight:bold; color:#0000ff;"/>
  <input type="hidden" name="sitesearch" value="" /></td></tr>
  </table>
  </div>
</form>
Avatar billede keysersoze Guru
20. september 2019 - 09:30 #3
kig på border-radius.
Avatar billede Jan Rasmussen Juniormester
20. september 2019 - 11:17 #4
Så fik jeg indsat denne kode border-radius:48px så nu er søgeknappen med runde kanter, men jeg kan simpelthen ikke finde udad at få søge tekst boksen til at have runde hjørner.

<form method="get" action="http://www.google.com/search">
<div style="padding:1px;width:50em;">
  <table border="0" align="left" cellpadding="40">
  <tr><td>
  <input type="text"  style="font-family:times new roman,serif; font-size:12pt; font-weight:" name="q" size="45" style="color:#808080;"
  maxlength="225"    value="Skriv hvad du søger her..." 
  onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
  <input type="submit" value="    Google søg  "  style="font-family:times new roman,serif; font-size:12pt; font-weight:bold; color:#0000ff; border-radius:48px"/>
  <input type="hidden" name="sitesearch" value="" /></td></tr>
  </table>
  </div>
</form>
Avatar billede keysersoze Guru
20. september 2019 - 12:24 #5
Det burde være det samme, altså border-radius. Hvis det ikke virker har du set et sted vi kan se det?
Avatar billede Jan Rasmussen Juniormester
20. september 2019 - 12:57 #6
Hej jeps og tusinde tak for du kikker jeg leger og eksperimentere på www.liebediet.com men det er til zoom2.dk - Mangler nok noget kode til at at ændre på knappen og tekst boksen
Avatar billede Jan Rasmussen Juniormester
20. september 2019 - 12:57 #7
ligesom der er skygge på søg knappen meget mærkeligt
Avatar billede keysersoze Guru
20. september 2019 - 22:17 #8
Det virker fint hvis jeg sætter border-radius på - selvfølgelig såfremt koden er valid, lige nu har alle dine felter vist en tom font-weight og det giver ingen mening. kig på border hvis kanten skal styles anderledes.
Avatar billede Jan Rasmussen Juniormester
22. september 2019 - 11:02 #9
Hej Keysersoze - Søge bar virker fint se på zoom2.dk. Men jeg forstår ikke helt dit svar da jeg ikkeved hvad font weight er er det en kode jeg skal sætte ind for at kunne lave runde hjørner på tekst/søge boks -  Jeg kan godt få runde hjørner på søg knappen. Men desværre er der en skygge på søgeknappen som jeg ikke kan fjerne. Ville gerne at hele søge boks ser ud son den på google.com -

Iøvrigt tusinde tak fordi at du gider at komme med gode råd - Meget prisværdigt for en super nybegynder som mig..:- )
Avatar billede keysersoze Guru
22. september 2019 - 11:16 #10
font-weight har ikke noget med runde hjørner at gøre - den er med til at styre vægten på fonten men den har ikke nogen værdi så den skal bare væk.

https://www.w3schools.com/cssref/pr_border.asp
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester