Witam,
chciałbym, aby po najechaniu myszką <input> zmieniał tło na inny obrazek, kolor.

Mam tak:

[HTML] pobierz, plaintext 
.inputSOne {
    border: 0px;
    background: url("../grafika/button_green_60x22.gif") no-repeat;
    font-size: 12px;
    font-weight: bold;
    width: 60px;
    height: 22px;
    color: #ffffff;
}
 
.inputSOne:hover {
    background: url("../grafika/button_orange_60x22.gif") no-repeat;
}
[HTML] pobierz, plaintext 

i działa niby ok, ale myślę sobie, że to nie jest najlepszy sposób dla pola <input> ?

Pytanie: czy tak jest napewno OK i jak to zrobić zawodowo, only professional

Szczerze mówiąc nie daję głowy czy działa to w takich ustrojstwach jak IE, musisz wtedy zastosować odpowiednie obejścia. Dla reszty przeglądarek OK

Nie stosuję zwykle takich skeczy, ale z tego, co pamiętam, to niektóre przeglądarki (zwłaszcza na platformach uniksowych) nie za bardzo chcą zezwalać na takie stylowanie. Wtedy tło należy ustawić dla rodzica, a dla danego elementu - transparent.

Nie było moim zamiarem wywoływanie śmiechu, chociaż w życiu trzeba czasem śmiesznym być.

Jak pisałem styl dział, ale nie za każdym razem po najechniu myszką na button działa tak jak powiniem.
Czasem po najechaniu myszką powstaje przerwa, zanim zmieni się obrazek w tle buttona, przez co button chwilowo jest bez tła.
Myślę, że jest bardziej doskonałe rozwiązanie problemu i dlatego pytam.

Jeżeli złączysz w jeden plik dwa tła, problem chwilowej przerwy zniknie, np.
wysokość inputa: 22px, więc cały plik ma wysokość 44px i css:

[CSS] pobierz, plaintext 
background-position: -22px;
[CSS] pobierz, plaintext