background input - jak to zrobić najwydajniej?

[Eldoka]

witam,

jak zrobić input z zaokrąglonymi rogami najwydajniej czyli grafika powinna zajmować jak najmniej. Większość przeglądarek powinna to obsługiwać i najlepiej zgodna z w3c.

@edit

grafik ma zielone papiery jak widać więc proszę złośliwych komentarzy nie pisać

[gawith]

witam,

jak zrobić input z zaokrąglonymi rogami najwydajniej czyli grafika powinna zajmować jak najmniej. Większość przeglądarek powinna to obsługiwać i najlepiej zgodna z w3c.

Najlepszy sposób to chyba po prostu 4 graficzne narożniki i bg w tym samym kolorze lub jako kolejna grafika. Bez względu na rozmiary waga minimalna.

[Kleszcz]

.input {
border: 1px solid #000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;	
-webkit-border-radius: 3px;
	padding: 3px;
background-color: #ffffff;
}

[Eldoka]

nie mogę znaleźć przykładów. Jakby ktoś przeczytał to co teraz piszę i znał taką stronę z inputami zaokrąglonymi w sposób graficzny a nie -moz to proszę je podać.

z góry dzięki

[gawith]

.block .top-corners{background:url(left_corner_top.gif) left top no-repeat;}

.block .top-corners div{background:url(right_corner_top) right top no-repeat; padding:0 7px; position:relative;}

.block .top-corners div div{background:url(block_bg.gif) left top repeat; height:7px; overflow:hidden;}

.block .content{background:url(block_bg.gif) left top repeat; padding:6px 6px 1px; position:relative; z-index:999;}

.block .bot-corners{background:url(left_corner_bottom.gif) left top no-repeat;}

.block .bot-corners div{background:url(right_corner_bottom.gif) right top no-repeat; padding:0 7px; position:relative;}

.block .bot-corners div div{background:url(block_bg.gif) left top repeat; height:7px; overflow:hidden;}

Taki mój klasyczny na szybko, ale nie wiem czy się sprawdzi przy tak małych rozmiarach

[yavaho]

Dwa obrazki, jeden po lewej drugi po prawej (w PNG razem nie więcej niż 0,4 kb)

.in_l {
background:#fff url('img_l.png') top left no-repeat;
width:150px;
height:18px;
}
.in_r {
background: url('img_r.png') top right no-repeat;
width:150px;
height:18px;
}
.in {
background:none;
padding:0 5px;
margin:0;
border:0;
outline:0;
}

<div class="in_l">
<div class="in_r">
<input class="in" type="text" value="TEKST" />
</div>
</div>

[misieq]

~gawith - jak piszesz taki błyskotliwy kod, to nie dziel się nim na forum.

[zielony_gremlinek]

najwydajniej czyli grafika powinna zajmować jak najmniej.

Nie do końca się z tym zgodzę, ponieważ nie tylko waga grafiki się liczy, można zrobić to samo za pomocą malutkich plików w tle, jak to podpowiadają koledzy, wtedy waga grafiki faktycznie jest mała, jednak grafik jest "ileś tam" wykorzystanych a każda graficzka, to wywołanie serwera, przy dużym ruchu lepiej te części scalać w jedną grafikę. Wiele znanych stron to stosuje. Nie tylko w wyszukiwarce.

polecam zapoznać się z CSS sprite Dla leni są generatory plików "połączonych" z gotowym kodem CSS

[Darek82]

Najprostszy sposób jaki mi przychodzi na myśl, to zastosowanie diva, a w nim zwykłego inputa. I teraz musisz zrobić2 rzeczy:

1. dla div'a dajesz tło w formie obrazka (obrazek ma zawierać inputa z zaokrąglonymi rogami.

2. dla inputa dajesz border: none, żeby nie było widać jego krawędzi. Jeżeli nadal będzie widać inputa, to dajesz mu background o takim kolorze jak ten div z punktu 1

Zalety: kompatybilność z przeglądarkami, w3c, wygodne kodowanie i manipulacja położeniem input'a

Wady: szerokość input'a musi być stała - można to oczywiście przeskoczyć, ale czy potrzebujesz inputów o różnej szerokości?

[misieq]

Dwa diwy + jeden input.

Pierwszy div z lewą stroną zaokrąglonego tła inputa o szerokości powiedzmy 500px, ustawiona pozycja relatywna. Można dać wyświetlanie inline

Drugi div z tłem prawej strony inputa, pozaycja absolutna do prawej strony.

Input w pierwszym divie. Szerokość przypisana do inputa.