Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]przesunięcie selecta przez styl
Forum PHP.pl > Forum > Przedszkole
Kiui
Witam.
Tworząc pasek wyszukiwania użyłem trzech pól: text, select, submit I było wszystko dobrze dopóki nie zacząłem ich opisywacz w css.
Opisując submit i text było wszystko ok ale jak zacząłem opisywać selecta to mi się w FF obniżył od reszty o jakieś 2px a w operze podwyższył o jakieś 2px.
Może ma ktoś pomysł jak to rozwiązać lub co źle zrobiłem.
  1. <div id="wyszukiwarka"><form action="szukaj.php" method="GET">
  2. <input type="text" class="szukaj" name="szukaj">
  3. <select class="szukaj" name="metszuk">
  4. <option value="1">nazwa pliku</option>
  5. <option value="6">autor</option>
  6. <option value="11">dodający</option>
  7. <input type="submit" name="wyslij" class="przyciskszukaj" value="szukaj">
  8. </form></div>
  9.  
  10.  
  11. input.szukaj{
  12. width:700px;
  13. height:30px;
  14. background-color:#E4E4E4;
  15. border-top-left-radius: 60px;
  16. border-bottom-left-radius: 60px;
  17. border:0;
  18. }
  19. input.przyciskszukaj{
  20. border-top-right-radius: 60px;
  21.  
  22. height:30px;
  23. border-bottom-right-radius: 60px;
  24. border:0;
  25. margin-bottom:10px
  26.  
  27. }
  28. select.szukaj{
  29. border:0;
  30. background-color:#E4E4E4;
  31. height:30px;
  32. width:110px;
  33. }
  34.  
przemo191
Nie jestem ekspertem, ale w 3 linii masz class="wybszuk", a w 29 select.szukaj
abort
Ja w ramach jednego formularza nadaję elementom jedną klasę (np. "search") i styluję:

  1. .search input
  2. .search input[type=text]
  3. .search input[type=submit]
  4. .search select

i tak dalej.
Ma to tę zaletę, że jak przy polu opisuję co ma się znaleźć, np:
  1. <div class="szukaj">Podaj login: <input type="text" /></div>

to w samej klasie "szukaj" mogę zdefiniować np. wspólny kolor tekstu czy font dla opisów w całym formularzu.
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.