[css]/[js] Jak zamiast pola textowego input wstawic jakis obrazek ? Opcje

[dawhol]

Witam (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Potrzebuje niewielkiej pomocy. Chcę zamiast tradycyjnego pola input type=text miec obrazek ale dzialajacy jako pole input (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) tzn ma byc pole input ktorego nie widac a zamiast niego jest obrazek tlumaczac byc moze prosciej ma byc obrazek "przed" obrazkiem ma sie znajdowac przezroczyste pole input ;D chyba wiecie o co mi chodzi (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) znalazlam jak zrobic graficzny przycisk w css ale niewiem jak z tym polem input sie uporac a nie moge nigdzie znalezc stronki z takim inputem zeby sobie podejrzec zrodlo (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)



Jak ktos nie wie jescze o co chodzi to chodzi mi o cos takiego:
(IMG:http://img292.imageshack.us/img292/451/inputow6.jpg)



Jezeli ktos wie gdzie takie cos jest a wiem ze gdzies jest ;D, to prosze o podanie adresu (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) a jeżeli ktos wie jak to zrobić to proszę o instrukcje (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[Strzałek]

CSS:

Kod

.ladny_input {
background: url(obrazek.gif);
}

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

http://www.w3schools.com/css/pr_background.asp

[dawhol]

problem w tym ze to mi sie rozlatuje bo obrazek ma ramke a ta ramka wchodzi do srodka inputa a tak nie moze byc =/ z tego co wiem to to bedzie chyba musialo byc w javie.



A powyższy sposób juz testowałem, ale dzieki za dobre chęci.

[Strzałek]

W javie to napewno nie, jeżeli już to w java script, ale tutaj też nic nie zdziałasz. Poprostu trzeba css napisać do tego i będzie działać.
Powiedz dokładnie o co chodzi.

O to aby nie było w ogóle widać tej ramki obrazka, czy żeby ona była, tylko tekst żeby był w tej ramce (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) ?

[dawhol]

http://www.quirksmode.org/dom/inputfile.html



tu to znalazlem ale i tak nic z tego nie czaje ;/ troche to zakrecone (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) jak cos rozumiesz to jak mozesz to objasnij mi to po chlopsku (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

[Strzałek]

Styling an input type="file"

Chcę zamiast tradycyjnego pola input type=text

Zdecyduj się o co Ci chodzi.
Jeżeli o file to rzeczywiście, trzeba użyć java script, tak jak podałeś link, ew. w wersji polskiej u Anakina: http://anakin.us/blog/style_css_dla_pola_typu_file/.
Jeśli jednak o text to to co ja Ci podałem + height, width, oraz padding, aby dopasować sobie ładnie.

[dawhol]

[HTML] pobierz, plaintext 
<style type="text/css">
<!--
form.example input {
background: url('obrazek.gif') no-repeat;
border: none;
width: 241px;
height: 20px;
padding-left: 3px;
padding-top: 3px;
}
 
form.example input:focus {
background-color: transparent;
}
-->
</style>
[HTML] pobierz, plaintext 

no i pozniej

[HTML] pobierz, plaintext 
<form .... class="exemple">
 
<input ..... /></form>
[HTML] pobierz, plaintext 

i działa pięknie a exemple mozna zmienic na cos innego (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)



Czyli tak jak mowiles wystarczyl css ale wlasnie nie wiedzialem jak zrobic pole input przezroczystym (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

a tu mamy (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

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

PS> JESCZE JEDNO PYTANIE (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

czy mozna jakos za pomoca css ograniczyc ilosc znakow w polu input czy tylko js ?

Ten post edytował dawhol 19.01.2007, 20:25:22

[Cienki1980]

W htmlu za pomocą maxlength

[HTML] pobierz, plaintext 
<input type="text" maxlength="3">
[HTML] pobierz, plaintext 

[dawhol]

Dzięki wielkie i to juz wszystko co chciałem (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[Strzałek]

Poducz się CCS + XHTML i nie staraj się od razu wszystkiego robić za pomocą js, bo to Cię zgubi.
Na początek polecam http://kurs.browsehappy.pl/ (IMG:http://forum.php.pl/style_emoticons/default/Rkingsmiley.png)