[CSS][JavaScript]Pole input i jego obwódka Opcje

[Konduktor123]

Cześć

Dla Was to pewnie banalne.. Dla mnie nie (IMG:http://forum.php.pl/style_emoticons/default/haha.gif) Szukam kodu/przykładu jak zrobić pewien ciekawy efekt. A mianowicie chciałbym aby po kliknięciu na pole input, w okół niego pojawiła się np. zielona obwódka. Widziałem to na kilku forach niestety nigdzie nie udało mi się wyciągnąć kodu..

[k_@_m_i_l]

Ja polecam bilbioteką jQuery(bez niej też da sie zrobić,ale ostatnio potrzebowałem tego efektu w projekcie,więc tu podam) :

Kod

$('input:text').focus(function()
{
   $(this).css('border','1px solid green');
});

Ten post edytował k_@_m_i_l 10.03.2009, 14:53:28

[piotrooo89]

a ja od siebie dodam czystą JS:

[HTML] pobierz, plaintext 
<input type="text" onFocus="this.style.border='1px solid green';" />
[HTML] pobierz, plaintext 

Ten post edytował piotrooo89 10.03.2009, 14:50:19

[Konduktor123]

Dobra ;p
Kod piotrooo89 bardziej mi się spodobał więc kontynuuję..
Jak zrobić aby po "od kliknięciu" ramka znikła?

[piotrooo89]

[HTML] pobierz, plaintext 
<input type="text" onFocus="this.style.border='1px solid green';" onBlur="this.style.border='1px solid black';" />
[HTML] pobierz, plaintext 

//edit

literówka

źle srednik... ~Spawnm thx

Ten post edytował piotrooo89 10.03.2009, 15:19:53

[Konduktor123]

Coś ten kod nie działa ;/

[k_@_m_i_l]

Pojawia się :

Kod

$('input:text').focus(function()
   {
     $(this).css('border','1px solid green');
   });

znika :

Kod

$('input:text').blur(function()
   {
     $(this).css('border','1px solid black');
   });

A czysty js :

[HTML] pobierz, plaintext 
<input type="text" onBlur="'this.style.border=1px solid black'" />
[HTML] pobierz, plaintext 

edit. ehh te literówki,też miałem (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował k_@_m_i_l 10.03.2009, 15:09:51

[Spawnm]

literówka,
zobacz jak dasz:

[HTML] pobierz, plaintext 
<input type="text" onFocus="this.style.border='1px solid green';" onBlur="this.style.border='1px solid black;'" />
[HTML] pobierz, plaintext 

nie zamknął ".

[Konduktor123]

Spawnm ja wiem, znalazłem ta literówkę i poprawiłem, chodziło mi o to, że ta funkcja nie działa (nie odznacza się).

k_@_m_i_l nie rozumiem, co to w ogóle za język i w jakim znaczniku to wkleić?
Sorry, za głupie pytania ale nie znam się na tym...

[k_@_m_i_l]

To jest framework js jQuery,bardzo przyjemny do pracy,ułatwia wiele rzeczy:)
jQuery

[Spawnm]

bo była kolejna literówka:

[HTML] pobierz, plaintext 
<input type="text" onFocus="this.style.border='5px solid green';" onBlur="this.style.border='5px solid black';" />
[HTML] pobierz, plaintext 

teraz działa (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[piotrooo89]

że ta funkcja nie działa (nie odznacza się).

u mnie wszystko ok jest. klikam mam zielona odklikam mam czarna.

[Konduktor123]

Spawnm dzięki teraz działa (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Kod

<input type="text" onFocus="this.style.border='1px solid green';" onBlur="this.style.border='1px solid black';" />

Skoro to działa, nie będę już kombinował z tym jquery, może innym razem ;p

Mam jeszcze jedno pytanie.
Czy da się to jakoś zdefiniować np. w css, czy muszę za każdym razem do input dodawać ten długi kod?
Kod formularza, w którym jest 20 tego typu pól będzie wyglądał dość śmiesznie (IMG:http://forum.php.pl/style_emoticons/default/haha.gif)

[piotrooo89]

nie mozesz sobie funkcje napisac. i tylko w onFocus i onBlur wywolywac. lub zastosowac jQuery co uprzyjemni twoja prace.

[Konduktor123]

Dobra, no to chyba jeśli chodzi o ramki wszystko już wiem ;p
Nie będę zakładał nowego tematu, więc zapytam tutaj:

Jak widać na tym forum wyszukiwarka google (która też jest z tego co widzę polem input) ma delikatnie zaokrąglone rogi.
To również zasługa query? A może jest na to jakaś "zwykła" funkcja?

//edit
aha już widzę, to jest obrazek ;p
Dobra dzięki za wszystko (IMG:http://forum.php.pl/style_emoticons/default/haha.gif)

Ten post edytował Konduktor123 10.03.2009, 15:44:40