elementos de formulario de peluquería (seleccionar, casilla de verificación, radio, etc.)?

Question

Los elementos de formulario Styling el uso de CSS puede ser problemático ya que cada navegador render etiqueta en forma diferente (al igual que cuando hacen Safari casilla de verificación).

De acuerdo le permite ignorar safari por un tiempo, desuello y el botón de entrada son bastante fácil, pero la forma de la piel por completo de selección, casillas de verificación, radio, etc.

Vea estas páginas:
Casilla desollado
Seleccionar desollado
Radio despellejar

He oído algún marco JS como ExtJs o MooTools puede hacer eso, pero yo no quiero una solución de gran escala marco, justo JS independiente y podemos modificar la piel como nos gusta, por favor, no hay solución jQuery, ya i no lo uso.

Cualquier idea hacer eso sin necesidad de utilizar algún tipo de marco específico?

Answer 1

Hoy en día hay muchas soluciones bastante javascript que permiten una amplia gama de personalización para elementos de formulario estilo. Una rápida de Google llegó con unos pocos bonito:

• Tal vez el más conocido es el Bootstrap marco 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

• Casillas de verificación / Radios:
  

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

Hoy en día se pueden encontrar muchos tipos de formulario de elemento de estilo en Codepen.com

---

Respuesta Viejo (de 16 de mayo de '09 ):

  

Sí, es bastante fácil.

     

Puede utilizar niceforms, que es la escritura independet
para hacer   agradables formas que buscan, entonces usted puede modificar las imágenes gráficas
/   CSS como su deseo.

     

La idea es, codificación de algo que se ve con la misma
misma   funcionalidad, pero diseño diferente, entonces Lo que necesita para "darle   la vida" con un poco de magia javascript:)

     

A continuación, usted tiene que tener ilsteners por todo el lugar, a
cheque   lo que el usuario ha hecho clic, lo que necesita para reflejar
ese mismo valor   al elemento de forma oculta-pre la Red corresponde al "falso"   uno. medios, para manipularla.
entonces cuando se envía el formulario, el   valores correctos son lugares a través de JS.

Answer 2

Si desea tener un control completo, a continuación, por lo general, tiene que reemplazar el navegador controla por completo y falsa con otros elementos, hojas de estilo y scripts.

Si no desea utilizar un marco, a continuación, que básicamente se reduce a DIY.

Dicho esto, todo el concepto tiene un par de problemas.

1. El intentar conseguir los controles a comportarse como el usuario espera (entrada dada de hacer clic, doble clic, el triple clic, clic derecho, arrastrar, teclas de flecha, la tecla de control, etc, etc, etc) es dura .
2. Los controles no puede tener un aspecto como el usuario espera.

En lo personal, por lo general iba a tratar de dejar que los controles de formulario se adhieren a los valores predeterminados del sistema y no tratan de desviarse de ellas. Dar a los usuarios lo que esperan.