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ć

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.

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

.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

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

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

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

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?

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.