boîte de sélection graphique

Question

J'ai cherché un moyen de personnaliser la boîte de sélection d'un formulaire dans les navigateurs.

Je n'ai aucun problème à faire cela dans une boîte de saisie, mais la boîte de sélection semble être un peu plus compliquée.

En fin de compte, je voudrais avoir la boîte de sélection transparente via css et ajouter une image d'arrière-plan de ses environs div semblable à la façon dont je l'ai codé mes boîtes d'entrée

<div class="contact-input"> 
<input type="text" class="contact-text" name="name" placeholder="Name"> 
</div> 

.contact-input{width:247px;height:48px;background:url('../images/contact-inputbg.png') no-repeat;} 
.contact-text{width:217px;height:25px;margin:11px 0 0 11px;background:transparent;border:0;font:16px Arial, Helvetica, sans-serif;color:#a3a3a3;} 

Answer 1

La page Web Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements montre comment utiliser JS et un peu de CSS pour obtenir les champs de style select, checkbox, and radio. En outre, les champs de saisie que vous utilisez ne doivent pas être enveloppés dans une balise <label>, donc cela fonctionne avec FormTools.

Answer 2

Vous ne pouvez pas faire ceci avec CSS seulement (il y a beaucoup de problèmes avec des sélections de style, en particulier sa couleur de texte), mais avec un peu d'aide de JS vous pouvez changer son apparence: http://jsfiddle.net/kizu/cuaC9/

Ceci est un exemple de base, vous pouvez le mettre à niveau plus loin pour soutenir pressé, se concentrer, changé ou tout autre état.