Forum PHP.pl > [JavaScript] Zmiana koloru aktywnego inputa

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Zmiana koloru aktywnego inputa

pacior

4.11.2008, 13:25:47

Jak napisać style do imputa, w którym się zmieni ramka np na czerwona. Jeśli się w niej kursor znajduje.

Jakie style należy użyć

[HTML] pobierz, plaintext 
<input type="text" class="form" name="name" />
[HTML] pobierz, plaintext

skowron-line

4.11.2008, 13:35:26

[HTML] pobierz, plaintext 
<input type="text" class="form" name="name" onfocus="this.style.backgroundColor='green'" onblur="this.backgroundColor='white'" />
[HTML] pobierz, plaintext

piotrooo89

4.11.2008, 13:35:58

nie musisz używać js. wystarczy Ci zwykly css. poczytaj o hover w css.

[HTML] pobierz, plaintext 
.form
{
border: 1px solid black;
}
.form:hover
{
border: 1px solid red;
}
[HTML] pobierz, plaintext

fleshgrinder

4.11.2008, 14:20:16

Cytat(piotrooo89 @ 4.11.2008, 13:35:58 )

nie musisz używać js. wystarczy Ci zwykly css. poczytaj o hover w css.

[HTML] pobierz, plaintext 
.form
{
border: 1px solid black;
}
.form:hover
{
border: 1px solid red;
}
[HTML] pobierz, plaintext

rozwiazanie fajne, tyle ze nie zadziala w IE6, bedzie do niego potrzebny hack napisany tak czy siak w JS

pacior

4.11.2008, 15:15:53

No właśnie nie działa. Natomiast rozwiązanie A działa tylko w tedy kiedy kursor jest nad polem, a mnie chodził o to kiedy kursor się znajduje w środku. Ale wydaje mi się lepszym też rozwiązaniem bez JS jeśli jest to możliwe.

Rozwiązanie B działa tak samo w FF jak A, tylko jak już myszką zjadę to zmienia się na czarne pole a powinno być cały czas czerwone dopóki kursor jest w środku.

Cytat(skowron-line @ 4.11.2008, 13:35:26 )

[HTML] pobierz, plaintext 
<input type="text" class="form" name="name" onfocus="this.style.backgroundColor='green'" onblur="this.backgroundColor='white'" />
[HTML] pobierz, plaintext

Działa poprawnie tylko brakowało parę znaczków

[HTML] pobierz, plaintext 
<input type="text"  name="name" onfocus="this.style.backgroundColor='green'" onblur="this.style.backgroundColor='white'" />
[HTML] pobierz, plaintext

piotrooo89

4.11.2008, 15:21:04

w css możesz też zrobić zeby było po kliknieciu:

[HTML] pobierz, plaintext 
.form:focus
{
background-color: red;
}
[HTML] pobierz, plaintext

pacior

4.11.2008, 15:27:33

Cytat(piotrooo89 @ 4.11.2008, 15:21:04 )

w css możesz też zrobić zeby było po kliknieciu:

[HTML] pobierz, plaintext 
.form:focus
{
background-color: red;
}
[HTML] pobierz, plaintext

Właśnie o to mi chodziło dzięki

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.