KategorieWeb Developer

[CSS] Jak ustawić style dla tekstu zastępczego (placeholder) w polu input ?

Wraz z pojawieniem się standardu HTML5 otrzymaliśmy możliwość wykorzystania atrybutu placeholder, który ustawia tekst zastępczy elementu input, gdy ten jest pusty. Standard CSS3 określa pseudo element “::input-placeholder” którym powinniśmy się posługiwać przy definiowaniu styli dla tekstu zastępczego.

Niestety jak wiemy świat nie jest idealny i przeglądarki w większości wykorzystują prefiksy. Tak więc konieczne jest zapisanie definicji pseudo elementu dla każdej przeglądarki osobno, tak jak zostało zrobione to poniżej:

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

Dla osób nieco znających CSS-y powiem od razu że nie można tego zapisu uprościć do postaci:

::-webkit-input-placeholder, 
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder 
{  
   ...style...
}

Powyższy zapis nie zadziała, gdyż nie ma przedlądarki która by rozumiała prefiks ::-webkit-* i :-moz-* jednocześnie.

KategorieSkryptyWeb Developer

[Skrypty] Przyciski z paskiem postępu

Dla większości przycisków animacje ograniczają się do efektu wciśnięcia przycisku. Jednak wraz z coraz większymi możliwościami CSS-ów oraz coraz szerszego stosowania skryptów JavaScript mamy do dyspozycji coraz bardziej zaawansowane animacje. Poniższy zestaw przycisków pokazuje jak efektownie pokazać pasek postępu po kliknięciu na przycisk.
Czytaj dalej