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

[dawhol]

Witam

Potrzebuje niewielkiej pomocy. Chcę zamiast tradycyjnego pola input type=text miec obrazek ale dzialajacy jako pole input 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 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



Jak ktos nie wie jescze o co chodzi to chodzi mi o cos takiego:




Jezeli ktos wie gdzie takie cos jest a wiem ze gdzies jest ;D, to prosze o podanie adresu a jeżeli ktos wie jak to zrobić to proszę o instrukcje

[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 ?

[dawhol]

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



tu to znalazlem ale i tak nic z tego nie czaje ;/ troche to zakrecone jak cos rozumiesz to jak mozesz to objasnij mi to po chlopsku

[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



Czyli tak jak mowiles wystarczyl css ale wlasnie nie wiedzialem jak zrobic pole input przezroczystym

a tu mamy

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

PS> JESCZE JEDNO PYTANIE

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

[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/