Estilo a input type number

coper_8888 · #1 (**permalink**) 29/10/2013, 01:21

Buenas,

Estoy diseñando un formulario y aplicando un estilo a las cajas de texto, checkbox, etc...

El problema lo tengo cuando intento aplicar un estilo a los input type number, la caja con flechas de incremento y decremento.

Yo tengo el diseño y quiero aplicarlo. ¿Alguien dispone de algún ejemplo que pueda observar o alguna pista de como podría lograrlo?

Un saludo, gracias!!

pzin · #2 (**permalink**) 29/10/2013, 02:45

En principio no se puede. Realmente es una parte del navegador. Puedes por ejemplo ocultarlo en WebKit:

Código CSS:

Ver originalinput::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Pero por CSS no puedes realmente estilizarlo, ya que, como digo es una cuestión de cada navegador y no forma parte de ninguna especificación HTML. Si necesitas algo más personalizado, no te quedará otra que usar JavaScript. Es el prácticamente el mismo problema de estilizar los campos desplegables.

coper_8888 · #3 (**permalink**) 29/10/2013, 03:12

Gracias por responder.

Los desplegables si he podido personalizarlos y aplicarle el estilo. En este caso consiste en un área delimitada con un separador y la flecha desplegable. Con ellos no he tenido problema, pero con estos input number......

¿Alguna idea de como lo haría en javascript?

Un saludo!!

coper_8888 · #4 (**permalink**) 29/10/2013, 06:10

Lo que pretendo implementar es lo siguiente:

http://subefotos.com/ver/?4e952d3a9a42eaa4b0df042428cc173do.jpg

Un saludo!!

faillure · #5 (**permalink**) 29/10/2013, 08:18

por poder se puede, pero...