7
¿cómo puedo hacer campos de entrada de texto redondeados con css?CSS: campos de entrada de texto redondeados
gracias
A
Respuesta
1
Ambas respuestas son correctas usted puede utilizar estilos CSS3 (que en realidad no son compatibles con el IEs actuales) o puede usar un paquete de javascript como http://www.malsup.com/jquery/corner/.
Sin embargo, hay otra opción, que no debe descartarse aunque no sea exactamente ideal. Si las entradas son de longitud fija también se puede dibujar cualquier fondo (incluidos los bordes) que desea para sus entradas en una imagen y utilizar
background: transparent url(pathToYourImage.png);
border: none;
Esto tiene la ventaja de trabajar en casi todos los navegadores que se pueda imaginar.
+0
hola, el plugin que sugirió es genial, y lo estoy usando para divs. Sin embargo, me temo que no funciona para los campos de entrada de texto ... ¿algún consejo? – aneuryzm
+0
¿Solo envuelve tus entradas en un div? –
+0
no, no funciona. El contenedor está modificado, pero está justo detrás de él ... – aneuryzm
5
Con CSS3:
/* css 3 */
border-radius:5px;
/* mozilla */
-moz-border-radius:5px;
/* webkit */
-webkit-border-radius:5px;
0
intentar algo como esto: http://hannivoort.org/test/InputRoundedCorners.asp
0
en los navegadores modernos CSS3
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
en mayor tendrá que utilizar un JS como jquery con rounded corners plugin o Ruzee
0
Tal vez usted podría eliminar los contornos de los campos de entrada y luego con jQuery ponerlos dentro de una caja curvada ...
0
^ese último funcionará en todos los navegadores. Sin embargo, ¡algunos navegadores agregan un contorno! Chrome, safari, etc.
Sé que puede desactivar el contorno en cromo con el contorno: 0, pero no hay forma de que encuentre dónde puede desactivar el contorno en Safari. ¡Se verá horrible en eso!
-1
Use border-radius utilice píxeles según su diseño.
+1
Debe agregar un ejemplo que explique cómo funciona. – Mike
+0
'border-radius: 2px; ' –
Cuestiones relacionadas
- 1. selector CSS para campos de entrada de texto?
- 2. Entrada de texto del iPhone con bordes redondeados
- 3. estilo del texto de entrada CSS
- 4. Cómo agregar CSS para el texto tipo de entrada específica
- 5. ¿Color de fondo en campos de entrada y texto?
- 6. Campos de entrada de texto de Javascript que muestran texto de instrucciones (marcador de posición)
- 7. CSS para ocultar el valor botón de entrada de texto
- 8. ¿Cambiar el valor de una entrada de texto con css?
- 9. css: anulando entrada [type = "text"]
- 10. ¿Hay alguna manera de seleccionar múltiples tipos de campos de entrada con CSS?
- 11. Selectores CSS de entrada múltiple [tipo]
- 12. entrada simple_form con múltiples campos
- 13. Alineación vertical de la etiqueta CSS con los campos de entrada
- 14. ¿Cómo hacer bordes redondeados en IE8 con CSS?
- 15. Texto de entrada de texto deshabilitado
- 16. JQuery Seleccionar campos de entrada Excepto Oculto
- 17. Los elementos de entrada de estilo CSS
- 18. campos de entrada seleccionables y áreas de texto pero ningún otro contenido seleccionable en Firefox?
- 19. HTML/CSS de entrada/área de texto, texto por defecto, y los colores
- 20. entrada de texto simple_form
- 21. CSS: el botón Enviar parece más pequeño que la entrada de texto y el área de texto
- 22. Agregar mensajes de entrada a los campos de formulario HTML
- 23. Cómo deshabilitar la corrección de corrección gramatical en los campos de texto de tipo de entrada
- 24. Validar campos de entrada añadidos dinámicamente
- 25. ¿Cómo puedo ecualizar las alturas de los campos de entrada de texto?
- 26. Desactivación de Área de texto de CSS
- 27. Texto de entrada de AlertDialog
- 28. Faceteado con Solr usando campos de "cadena", campos de "texto" y campos de "copia"
- 29. hacer que los campos de entrada de texto y sus etiquetas se alinean correctamente
- 30. Verifique que todos los campos de entrada de texto estén vacíos con Selenium
Aunque varias de las respuestas a continuación funcionan, la respuesta con CSS3 es probablemente la solución más sólida en los estándares web actuales. La mayoría de los navegadores son compatibles con CSS3 hoy en día. – ScottyG