Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css]/[js] Jak zamiast pola textowego input wstawic jakis obrazek ?
Forum PHP.pl > Forum > Przedszkole
dawhol
Witam winksmiley.jpg

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



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 smile.gif a jeżeli ktos wie jak to zrobić to proszę o instrukcje winksmiley.jpg
Strzałek
CSS:

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


  1. <input type="text" class="ladny_input" />


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 tongue.gif ?
dawhol
http://www.quirksmode.org/dom/inputfile.html



tu to znalazlem ale i tak nic z tego nie czaje ;/ troche to zakrecone smile.gif jak cos rozumiesz to jak mozesz to objasnij mi to po chlopsku biggrin.gif
Strzałek
Cytat
Styling an input type="file"


Cytat
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
  1. <style type="text/css">
  2. <!--
  3. form.example input {
  4. background: url('obrazek.gif') no-repeat;
  5. border: none;
  6. width: 241px;
  7. height: 20px;
  8. padding-left: 3px;
  9. padding-top: 3px;
  10. }
  11.  
  12. form.example input:focus {
  13. background-color: transparent;
  14. }
  15. -->


no i pozniej

  1. <form .... class="exemple">
  2.  
  3. <input ..... /></form>




i działa pięknie a exemple mozna zmienic na cos innego smile.gif



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

a tu mamy smile.gif
  1. form.example input:focus {
  2. background-color: transparent;
  3. }





PS> JESCZE JEDNO PYTANIE winksmiley.jpg

czy mozna jakos za pomoca css ograniczyc ilosc znakow w polu input czy tylko js ?
Cienki1980
W htmlu za pomocą maxlength
  1. <input type="text" maxlength="3">
dawhol
Dzięki wielkie i to juz wszystko co chciałem 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/ Rkingsmiley.png
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.