Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Zmiana wyglądu formularza.
Forum PHP.pl > Forum > Przedszkole
nigraS
Posiadam taki kod:
  1. <form action="http://mój adres strony" method="POST" onsubmit="if(!document.getElementById('email').value.length) { alert('Wpisz swój adres e-mail!'); return false; }">
  2. <input type="hidden" id="form_token" name="form_token" value="ogtck3upsjewuw09" /><div class="form_row">
  3. <label class="control-label " for="address_email">E-mail</label><input type="text" id="email" name="address_email" /></div>
  4. <div class="form_row">
  5. <label class="control-label " for="field_imie">Imię</label><input type="text" id="field_imie" name="field[1]" /></div>
  6. <input type="submit" id="submit" name="submit" value="Wyślij" /></form>


Chciałbym, aby wyglądał tak:


Edytowałem kod w ten sposób wzorując się na innym formularzu
  1. <div style="width:280px; margin-top:20px;margin-left:auto; margin-right:auto;">
  2. <form action="http://moj adres strony" method="POST" onsubmit="if(!document.getElementById('email').value.length) { alert('Wpisz swój adres e-mail!'); return false; }">
  3. <input id="form_token" name="form_token" value="0vy3cm4qhfacu7nc" type="hidden">
  4. <input style="width: 218px; height: 27px; font-size: 14px; background-color: #e9e9e9; background-image:url(http://biznes.24-przez.net/thumb/myimages/0000205001488646642.png); margin-bottom:10px; background-repeat: no-repeat; padding:1px; padding-left:10px;" value="Wpisz swój email..." onfocus="if(this.value == 'Wpisz swój email...'){ this.value = '';this.style.color = '#212121' }" onblur="if(this.value == ''){ this.value = 'Wpisz swój email...';this.style.color = '#666666' }" id="email" name="address_email" type="text">
  5. <input style="width: 218px; height: 27px; font-size: 14px; background-color: #e9e9e9; background-image:url(http://biznes.24-przez.net/thumb/myimages/0579905001488649266.png); margin-bottom:10px; background-repeat: no-repeat; padding:1px; padding-left:10px;" value="Wpisz swoje Imię" onfocus="if(this.value == 'Wpisz swoje Imię'){ this.value = '';this.style.color = '#212121' }" onblur="if(this.value == ''){ this.value = 'Wpisz swoje Imię';this.style.color = '#666666' }" id="field_imie" name="field[1]" type="text">
  6. <input src="http://theme60.webatom.pl/thumb/myimages/0307037001493137263.png" title="zapisz mnie" style="margin-top:5px; width:229px; height:39px; background:transparent; border:none;" width="248" type="image" height="36">
  7. </form>
  8. </div>


Efekt wyszedł jaki zakładałem, lecz formularz przez to źle działa.
Po kontakcie z autorem napisał mi, że nie można tak ingerować w kod - napisał, że efekt jest do uzyskania ale wyłącznie poprzez ostylowanie css.
Proszę o pomoc, gdyż nie mam pojęcia jak to zrobić w scc, aby uzyskać ten efekt.
Niree
No ale...

To co masz w style="" daj jako klasę w pliku CSS.
Np.

  1. .guzik1 {
  2. kod w style=""
  3. }


potem zamiast style="", dajesz class="guzik1"
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.