Forum PHP.pl > vertical-align w polu input

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: vertical-align w polu input

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Brick

27.10.2009, 19:21:07

Czy ktoś ma sposób na ustawienie pionowe tekstu w polu input?
Przykład

[HTML] pobierz, plaintext 
<input type=text style="height:35px; width:100px;" value="Tutaj tekst">
[HTML] pobierz, plaintext

FF i IE wyświetla wpisany tekst u góry, Opera na środku.
vertical-align:middle czy baseline nie działa.
padding-top - działa i przesuwa tekst w dół ale w Operze wtedy tekst jest już na dole tego pola.
Na sieci znalazłem też pomysły z line-height ale nie działa.

t4keda

27.10.2009, 19:34:28

Może da się to obejść przez coś takiego:

[HTML] pobierz, plaintext 
<input type="text" style="height:15px; width:100px; padding: 5px 0px 5px 0px;" value="Tutaj tekst">
[HTML] pobierz, plaintext

Ustawić niezbyt wysokie pole (tak żeby tekst się mieścił) i rozepchać je paddingiem?

Brick

29.10.2009, 08:27:41

Niestety FF w takim wypadku w ogóle nie pokazuje tekstu. Padding nie rozpycha pola input tylko sam tekst przesuwa w dół, poza pole input.
Chyba nie da się tego zrobić żeby było ok we wszystkich przeglądarkach.

t4keda

29.10.2009, 13:49:09

Ostatnio też musiałem wyśrodkować tekst w input i zrobiłem coś takiego:

[HTML] pobierz, plaintext 
<input class="poletxt" type="text" value="Hasło"/>
[HTML] pobierz, plaintext

[CSS] pobierz, plaintext 
input.poletxt {
background-color:#171717;
border:2px solid #A8A8A8;
color:#E8E8E8;
font-family:tahoma,sans-serif;
font-size:11px;
height:15px;
padding:5px 0;
text-align:center;
vertical-align:middle;
[CSS] pobierz, plaintext

Tu możesz zobaczyć jak to wyszło: http://t4keda.cba.pl/jscript/contrast_css/
W moim FF3.5.3 ja widzę dosyć dobrze ustawiony tekst, więc to działa.

Brick

29.10.2009, 18:59:50

Dzięki za pomoc (klikam "pomógł")

Pomału doszedłem o co chodzi za pomocą twojego przykładu.
vertical-align:middle - niestety nie działa tak jak trzeba.
W FF i Opera bez różnicy czy jest czy nie ma, za to w IE środkuje napis ten obok pola input. IE jak zwykle luźno wszystko traktuje ;)

Przykład poniżej działa ok:

[HTML] pobierz, plaintext 
input.poletxt
{
	height: 17px;
	padding: 5px 0px 5px 0px;
	vertical-align:middle;
}
<p>Login: <input class="poletxt" type="text" value="Login" /></p>
[HTML] pobierz, plaintext

Ale UWAGA!
DOCTYPE musi być XHTML
czyli
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
Gdy damy HTML to nie działa.

Tutaj jest przykład działający, może komuś się przyda

t4keda

29.10.2009, 22:36:17

vertical-align, jeśli dobrze pamiętam to nie środkuje tekstu względem elementu, ale element względem tekstu. Fakt, że jeśli masz jedną linijkę tekstu, która jest niższa od elementu któremu nadałeś vertical-align, to wygląda to jakby tekst przesuwany. Ale zobacz co się stanie jeśli będziesz miał długi tekst (kilka linijek) i dasz vertical-align (middle, top, bottom) obrazkowi.

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.