Customiser une balise select

Mise à jour du 15/01/2014 à 16h49 : Evitez d’utiliser une image comme background pour le select car Chrome ne l’affiche pas contrairement à la couleur.

Article initiale : Bonjour à tous,

Je me suis pris la tête pour arriver à customiser un select. Je me suis dis que ça pourrait vous intéresser, aussi je vous partage mes trouvailles.

Pour ceux qui ne connaissent pas le select c’est ça : .
Par défaut, un select n’est pas super sexy. Et ce n’est pas très facile de le modifier.

Voyons ensemble comme le rendre un peu plus sympa.

Code HTML


<!DOCTYPE HTML>
<head>
<meta name="charset" content="UTF-8"/>
<link rel="stylesheet" type="text/css" href="urlDuFichier/nomDuFichierCSS.css" title="style1"/>
</head>
<body>
<form action="urlDuTraitementDesDonnes" method="POST">
<select id="monSelect" name="monSelect">
<option value="1">Oui</option>
<option value="0">Non</option>
</select>
</form>
<body>

Là rien de bien exceptionnel, c’est une page web basique.

Partie CSS

Coté CSS, on va customiser le select ainsi (on le met dans « nomDuFichierCSS » qu’on a mis dans la balise link rel du head coté html):

select{
background : #DAEAF9;
border : 1px solid black;
border-radius : 5px;
padding : 3px;
}

On met une image de fond pour le select ou une couleur, c’est l’utilité du background. Si vous mettez une image, mettez aussi une couleur en fin de la ligne au cas où. En général, je vous conseille la couleur à l’image. Ensuite, on met un bord d’un pixel d’épaisse, continu et noir. C’est l’utilité du border. Le border-radius, lui sert à arrondir les coins du select.
Le padding nous permet d’avoir un petit espace intérieur de 3pixel.

Voila ce que ça donne :

Notre select est un peu plus joli, mais ce bleu n’est pas du meilleur effet. On peut le surcharger, en partie, grâce au css suivant.

option:hover{
background : img('UlrDeLimageDeFond.jpg') #CouleurRGB;
}

Ce qui nous donne :
select
La souris était sur le Oui quand j’ai fait l’imprim écran (moins chiant que de modifier les styles WordPress 🙂 ).
select2
Cet imprim écran a été fait quand la souris n’était plus sur un option.

Donc quand la souris est sur un option, on n’a plus le fond bleu, mais si on met la souris ailleurs, il revient.

Voilà comment modifier un select, sans pour autant passer par des div ou des ul li couplés à du js voir du jquery. L’avantage de cette méthode est que le select reste facilement utilisable sur mobile, contrairement à beaucoup d’autres méthodes.
J’espère que ça pourra en aider certains d’entre vous.
Pour information, cette solution ne fonctionne pas sous IE7.

Likes(0)Dislikes(0)

Les montres connectées d’Archos

Le société française Archos profite du CES 2014 de Las Vegas pour présenter trois montres connectées :

  • La première aura un écran LCD noir et blanc 1.5 pouces, une autonomie de plus d’une semaine et un prix de 50$/€
  • La seconde est équipée d’un écran LCD couleur 1.8 pouces, d’une autonomie de 2 jours (écran couleur oblige) et un prix de 100$/€
  • La troisième, enfin, a un écran noir et blanc à encre numérique et sera vendu au prix de 130$/€ (je n’ai pas trouvé d’information concernant l’autonomie)

Si vous souhaitez avoir de plus ample informations sur ces montres, je vous laisse consulter les liens que je mets en fin d’article.

Depuis quelques mois maintenant, nous constatons un engouement pour les montres connectées et tous les constructeurs se lancent dans l’aventure. Pourtant je trouve que les produits actuels passent complètement à coté de l’esthétisme qui est, pour moi, un point essentiel. Prenons la Galaxy Gear de Samsung par exemple : déjà avoir un appareil photo dans ma montre (alors que j’en ai déjà un dans mon téléphone) je m’en fou mais en plus ça donne l’impression d’avoir une verrue sur son bracelet… Tout ça pour dire que le design des deux premières montres d’Archos est aussi moche que la concurrence et qu’ils peuvent mettre autant de puissance qu’ils veulent dedans, ils ne sont pas prêts de me les mettre au poignet !

Reste le dernier modèle (celui qui coûte quand même 130€). Le design m’a convaincu, au moins sur les photos, mais j’attends de connaître l’autonomie avant d’envisager quoique ce soit. Pour le reste, je ne suis pas exigent, j’attends d’une montre connectée qu’elle m’affiche au poignet les notifications de mon smartphone, après libre à moi de voir si je veux le sortir de ma poche pour répondre…

 

Sources :

minimachines.net

phonandroid.com

Likes(0)Dislikes(0)

Un smartphone par Quechua

Mise à jour : Le fabricant du téléphone est Archos, constructeur français qui possède une bonne réputation dans ce domaine (source).

Article initiale : En faisant un tour chez Décathlon hier, je suis tombé sur un smartphone vendu par Quechua.

Ce smartphone tourne sous Android 4.1 et possède un écran de 5 pouces.
Il est censé résister aux chocs. Il peut chuter d’un mètre sans être cassé. Il a un revêtement et une construction antichoc. Il résiste également à la pluie, la boue, la poussière et la neige.
Son autonomie est mise en avant par Quechua, car sa batterie est de 3500mAh (celle d’un nexus 5 est de 2300mAh).
Il a un appareil photo de 5 Megapixel, ce qui est un peu faible quant on voit ceux des concurrents.
Il a un processeur Quadcore 1,2Gh et 1Go de RAM (d’après ce que j’ai pu voir sur leur appareil hier).
Officiellement, il supporte la 3G, mais en regardant d’un peu plus près il y a aussi la LTE qui est supporté. Le hic, c’est que je ne sais pas si c’est la LTE française ou non (comme c’est le cas avec le nexus 4 qui a la LTE mais pas française).

Coté design, à vous de voir :

QuechuaPhone5

QuechuaPhone5

Voici la fiche récapitulative de l’appareil :

Caractéristiques QuechuaPhone5

Caractéristiques QuechuaPhone5

et la fiche de la publicité qu’ils font :

publicité QuechuaPhone5

publicité QuechuaPhone5

Coté packaging, c’est relativement simple :

packaging QuechuaPhone5

packaging QuechuaPhone5

Il est vendu pour la modique somme de 229€90.
Si ça vous intéresse, vous pouvez trouver ici la page de Quechua qui en vante les mérites.

Likes(0)Dislikes(0)

Une backdoor dans plusieurs routeurs

Bonne année et bonne santé à tous.

L’information est sortie sur plusieurs sites (Korben, Numérama, etc) : il existe une backdoor dans certains routeurs des marques Linksys et Netgear qui utilise le port 32764.
Je sais de source sûr (merci à Guillaume) que cette faille existe aussi sur Dlink.

Ce qui est gênant dans cette histoire, c’est que beaucoup de box de nos fournisseurs d’accès à internet utilisent ces marques. Personnellement, ma box est une Netgear. Je vais regarder si elle est sensible à cette faille. Si c’est le cas, ça ne sert pas à grande chose de s’embêter à mettre des protections par restriction de plages ip ou autres car la personne peut modifier votre configuration après avoir récupéré le mot de passe par la faille. 🙁

Je ne sais pas s’il est possible de bloquer ce port le temps qu’un correctif soit mis en place. Je vais regarder ça de plus près et vous fais un retour.

Likes(0)Dislikes(0)