styliser le placeholder

Les boules de noël, c’est simple d’utilisation mais ça prend de la place à ranger. Styliser les placeholders, ça ressemble à ça.

styliser le placeholder

le css :

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-style: Italic;
}
::-moz-placeholder { /* Firefox 19+ */
font-style: Italic;
}
:-ms-input-placeholder { /* IE 10+ */
font-style: Italic;
}
:-moz-placeholder { /* Firefox 18- */
font-style: Italic;
}

That’s all for […]

l’input calendrier

C’est Noël et c’est pour toi.

l’input avec son calendrier intégré

le html :

&ltinput type= »text » class= »datepicker »>

le script (il te faudra charger jquery-ui en plus de jquery et ajouter aussi jquery-ui.css) :

$(function() {
$( « .datepicker » ).datepicker({
altField: « #datepicker »,
closeText: ‘Fermer’,
prevText: ‘Précédent’,
nextText: ‘Suivant’,
currentText: ‘Aujourd\’hui’,
monthNames: [‘Janvier’, ‘Février’, ‘Mars’, ‘Avril’, ‘Mai’, ‘Juin’, ‘Juillet’, ‘Août’, ‘Septembre’, ‘Octobre’, […]

Styliser un select

Un sapin sans boule, c’est comme un select sans style.

Styliser un select, c’est à ta portée

le html :

&ltdiv class= »list1″>
&ltselect >
&ltoption value= »0″>Choisir un type &lt/option>
&ltoption value= »1″>type 1 &lt/option>
&ltoption value= »2″>type 2 &lt/option>
&ltoption value= »3″>type 3 &lt/option>
&lt/select>
&lt/div>

Le css :

.list1 {
width: 260px;
[…]

Ajouter ou supprimer une class au click

Un script aussi indispensable à connaître que la présence du sapin à Noêl (quand il y a des enfants dans la pièce, parce que sinon…).

Ajouter ou supprimer une class au click

Le petit script :

$(document).ready(function(){
$(« ul li a »).click(function() {
$(« ul li a »).each(function(){
$(this).removeClass(« active »);
});
$(this).addClass(« active »);
[…]

After et before

Economise les boites pour Noël !

Utiliser :before et :after

Le principe c’est de simplifier le html mais complexifier le css 😉

Au lieu d’écrire :

&ltp>&ltspan class= »icon »>&lt/span>Je mets des icones supers devant et derrière mon texte&ltspan class= »icon icon2″>&lt/span>&lt/p>

J’écris seulement :

&ltp class= »icon »>Je mets des icones supers devant et derrière mon texte&lt/p>

Et j’écris le css de cette manière :

p.icon:before {
content: » »;
position: absolute;
width: 10px;
height: 10px;
background: url(monimage.png) no-repeat left center //etc…
}
p.icon:after {
content: » »;
position: absolute;
width: 10px;
height: 10px;
background: url(monimage.png) no-repeat right […]

selecteur parent et frere

Parfois on se demande comment joindre les deux bouts quand Noël devient trop compliqué.

Sélecteur de parent… et aussi sélecteur de frère

Ils sont indispensables et nous sauvent la vie ces sélecteurs-là !

A:hover > B {}//si B est fils de A
A:hover + B {}//si B est frère directement suivant de A
A:hover ~ B {} //ça c’est le top ! si B est un frère suivant de A)

[…]

Pour vérifier que ton navigateur accepte les cookies

A Noël aussi, il y a plein de décos qui te semble, sur le coup, ne servir à rien, et puis un jour, en y repensant, tu comprends… ou pas.

Un petit script pour vérifier que ton ordi accepte les cookies

le bouton :

&ltinput type= »button » value= »Vérifier la prise en charge » onclick= »checkCookies(); » />

Le js :

function checkCookies() {
if(navigator.cookieEnabled) {
alert(« Votre navigateur accepte les cookies ! »);
}
else {
alert(« Activez vos cookies ! »);
}
}

A toi de tester ton navigateur […]