les éléments de forme de mise en plis (sélectionner, case à cocher, radio, etc.)?

Question

éléments de formulaire Styling en utilisant css peut être problématique, car tous les navigateurs rendent balise de manière différente (comme quand safari rendent case à cocher).

permet Okay ignorer safari pendant un certain temps, l'entrée et le bouton écorcher sont assez faciles, mais comment complètement la peau de sélection, case à cocher, radio, etc.

Voir cette page:
Checkbox
skinning Sélectionnez skinning
Radio écorcher

J'ai entendu un certain cadre JS tels que ExtJS ou MooTools peut le faire, mais je ne veux pas une grande solution-cadre à l'échelle, JS juste indépendant et nous pouvons modifier la peau que nous aimons, s'il vous plaît pas de solution JQuery, depuis Je ne l'utilise pas.

Toute idée de le faire sans utiliser un certain cadre spécifique?

Answer 1

Aujourd'hui, il y a assez de solutions javascript qui permettent un large éventail de personnalisation pour les éléments de formulaire style. Un rapide Google est venu avec quelques unes agréable:

• Peut-être le plus connu est le Bootstrap framework CSS:
  https://getbootstrap.com/docs/4.0/components/forms

• https://www.psd2html.com/js-custom-forms (plugin jQuery)

• https://purecss.io/forms

• https://github.com/select2/select2

• https://github.com/harvesthq/chosen

• / Radios Cases à cocher:

  • https://codepen.io/vsync/pen/aBOOZB
  • https://codepen.io/vsync/pen/wKkuz
  • https://codepen.io/manabox/pen/raQmpL

Aujourd'hui, vous pouvez trouver de nombreux types de style élément formulaire Codepen.com

---

Vieille réponse (de 16 mai '09 ):

  

Oui, il est assez facile.

     

vous pouvez utiliser niceforms, qui est le script independet
pour faire   belles formes à la recherche, vous pouvez modifier les images
graphiques /   CSS comme votre souhait.

     

L'idée est, coder quelque chose qui ressemble même
avec la même   fonctionalité mais design différent, puis Ce que vous devez « donner   la vie » avec un peu de magie javascript:)

     

alors, vous devez avoir ilsteners partout, à
chèque   ce que l'utilisateur a cliqué, que vous devez tenir compte de cette même valeur
  à l'élément de forme pré-caché le
correspond au « faux »   un. des moyens, pour le manipuler.
puis lorsque vous envoyez le formulaire, le   bonnes valeurs sont des lieux via JS.

Answer 2

Si vous voulez un contrôle complet, vous avez généralement de remplacer le navigateur contrôle les complètement et faux avec d'autres éléments, et les scripts stylesheets.

Si vous ne souhaitez pas utiliser un cadre, il se résume à du bricolage.

Cela dit, le concept a quelques problèmes.

1. Essayer d'obtenir les contrôles à se comporter comment est l'utilisateur attend (entrée donné de cliquer, double-cliquant, triple clic, clic droit, glisser, les touches fléchées, la touche de commande, etc, etc, etc) dur .
2. Les contrôles pourraient ne pas regarder que l'utilisateur attend.

Personnellement, je vais essayer généralement de laisser les contrôles de formulaire collent aux valeurs par défaut du système et ne pas essayer de s'écarter d'eux. Donner aux utilisateurs ce qu'ils attendent.