elementi del modulo Styling (selezionare, checkbox, radio, ecc)?

Question

elementi dei moduli Styling usando i CSS può essere problematico dal momento che tutti i browser rendono tag in modo diverso (come quando safari rendono casella di controllo).

D'accordo consente di ignorare safari per un po ', la scuoiatura di ingresso e il pulsante sono piuttosto facile, ma come pelle completamente select, checkbox, radio, ecc.

Vedere queste pagine:
Casella scuoiatura
Seleziona skin
Radio scuoiatura

Ho sentito alcune quadro JS come ExtJS o MooTools può farlo, ma io non voglio una soluzione su vasta scala quadro, basta indipendenti JS e possiamo modificare la pelle come ci piace, si prega di nessuna soluzione JQuery, dal momento che Io non lo uso.

Qualche idea per farlo senza l'utilizzo di un quadro di riferimento preciso?

Answer 1

Oggi ci sono abbastanza molte soluzioni javascript che consentono una vasta gamma di personalizzazioni per gli elementi di forma styling. Un google rapido si avvicinò con alcune fra le più belle:

• Forse il più noto è il Bootstrap framework CSS:
  https://getbootstrap.com/docs/4.0/components/forms

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

• https://purecss.io/forms

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

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

• Caselle di controllo / radio:

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

Oggi si possono trovare molti tipi di modulo elemento stilistico su Codepen.com

---

Old risposta (da 16 Maggio '09 ):

  

Sì, è abbastanza facile.

     

è possibile utilizzare niceforms, che è independet sceneggiatura
per fare   belle forme in cerca, quindi è possibile modificare le immagini grafiche
/   CSS come vostro desiderio.

     

L'idea è, codifica qualcosa che sembra lo stesso con lo stesso
  funcionality ma design diverso, quindi che cosa è necessario per "dare   vita" con qualche magia javascript:)

     

, allora, è necessario disporre di ilsteners tutto il luogo, per Alberghi Controlla   ciò che l'utente fa clic, di quanto è necessario per riflettere
lo stesso valore   all'elemento modulo di pre-nascosto il
corrisponde al "falso"   uno. mezzi, di manipolarlo.
poi, quando si invia il modulo, il   valori giusti sono luoghi tramite JS.

Answer 2

Se si vuole il controllo completo, quindi in genere si deve sostituire il browser controlla completamente e falso con altri elementi, fogli di stile e script.

Se non si desidera utilizzare un quadro, quindi si tratta fondamentalmente verso il basso per fai da te.

Detto questo, l'intero concetto ha un paio di problemi.

1. Cercando di ottenere i controlli a comportarsi come l'utente si aspetta (dato input da clic, doppio clic, clic tripla, clic destro, trascinamento, i tasti freccia, il tasto di controllo, ecc, ecc, ecc) è difficile .
2. I controlli non potrebbe apparire come l'utente si aspetta.

Personalmente, mi piacerebbe in genere cerco di lasciare i controlli dei moduli attaccano alle impostazioni predefinite del sistema e non cercare di deviare da loro. Dare agli utenti quello che si aspettano.