CSS3 Esquina redondeada para el elemento de entrada sin js/images

¿Quién puedo hacer la esquina redondeada para los elementos de entrada?CSS3 Esquina redondeada para el elemento de entrada sin js/images

Necesito una manera sin necesidad de utilizar JavaScript y las imágenes ..

Agregado:

<!DOCTYPE html> 
<html> 
<head>  
    <title>xx</title> 
<style type="text/css"> 
input 
{ 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
} 
</style> 
</head> 
<body> 
<input type="text" value="test" /> 
</body> 
</html>

No funciona en Firefox 3.6.12!

Fuente

2010-11-30 Isis

posible duplicado de [¿Cuál es la mejor manera de crear esquinas redondeadas usando CSS?] (Http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners -using-css) – codingbadger

Ver mi respuesta editada. Usted tiene un error en su código. –

@barry: esto no es un duplicado, es un problema diferente: código muy simple, incorrecto (como evan y yo publicamos) – oezi

CSS3 tiene muchas características nuevas que beneficien a los diseñadores web. Esto incluye el redondeo frontera:

input 
{ 
    -webkit-border-radius: 5px; //For Safari, etc. 
    -moz-border-radius: 5px; //For Mozilla, etc. 
    border-radius: 5px; //CSS3 Feature 
}

Puede agregar una clase a sus campos de entrada y el uso de esa clase en este fragmento CSS para dirigirse a ciertos elementos de entrada.

Internet Explorer 8 no es compatible con CSS3. Internet Explorer 9 incluirá todas sus características.

En lo que se refiere a su pregunta Editado:

"text/css/" debería ser "text/css".

Fuente

2010-11-30 12:59:21

CSS 3 te ayudarán. las fábricas de

este estilo para los elementos de ajuste también [en los navegadores modernos Atleast], aunque no probado en IE

border-radius: 16px; /* half of button size + padding */ 
-moz-border-radius: 16px; 
background: -webkit-gradient(linear, left top, left bottom, from(#8cc0f6), to(#cfe4fa)); 
background: -moz-linear-gradient(top, #8cc0f6, #cfe4fa);

Fuente

2010-11-30 12:55:11

Lo necesito para los elementos de ENTRADA – Isis

@lsis: ¿Has leído la respuesta? "Esta hoja de estilos también funciona para los elementos de entrada [en los navegadores modernos al menos], aunque no se probó en IE" –

@Jannis, lo he actualizado después de leer el comentario de @isis –

la forma en que lo hace es correcto (para navegadores modernos), el problema es que mal etiqueta de estilo de apertura:

<style type="text/css/"> 
        ^^^ this/shouldn't be there

nota de que las esquinas roundet no funcionarán en IE contigo CSS, Para lograr esto, deberá echar un vistazo a http://css3pie.com/ o usar images/jsvascript.

Fuente

2010-11-30 13:16:24 oezi

Para los navegadores modernos, utilice el siguiente código CSS:

input { 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
}

En otras palabras, casi exactamente lo que ha hecho ya.

Esto debería conseguirle esquinas redondeadas en todos los navegadores más importantes además de IE.

Sospecho que el motivo por el que no funciona es (a) lo está probando en IE (vea la solución a continuación), o (b) porque su etiqueta <style> tiene un atributo type incorrecto. Probablemente no necesite el atributo type; Sugeriría descartarlo por completo (generalmente solo se ve al cargar hojas de estilo de una fuente externa). Si lo mantienes, suelta la barra inclinada, ya que eso es definitivamente incorrecto.

Para IE, la solución es más complicada:

Por lejos la mejor solución para el CSS3 redondeado problema esquinas en IE es CSS3Pie.

Es un hack de solo IE basado en una característica de IE llamada CSS Behaviors. Esto significa que los navegadores que no sean IE lo ignorarán por completo y ni siquiera tendrán que descargar el archivo .HTC que contiene el hack.

Genera verdaderas esquinas redondeadas utilizando la biblioteca de gráficos vectoriales VML de IE, por lo que nunca tendrá bordes dentados o colores de fondo o patrones mal combinados.

Aunque tiene algunos problemas conocidos, está en desarrollo activo, e incluso los problemas que tiene son mucho menos problemáticos que los de cualquier otra solución.

CSS Behaviors es basado en Javascript - no encontrará una solución a su problema que no utilice Javascript en algún lugar de la línea (a menos que planee usar gráficos de esquina antiguos para todo), sino porque está encerrado en un archivo HTC específico de MS, otros navegadores nunca necesitan conocerlo, por lo que puede usar CSS3 normal sin javascript.

Esto significa que en el caso improbable de que un usuario de IE tenga Javascript desactivado, entonces sí, obtendrán las esquinas cuadradas. Pero puedes estar bastante seguro de que serán una minoría que desaparecerá.

Fuente

2010-11-30 13:52:22 Spudley

CSS3 Esquina redondeada para el elemento de entrada sin js/images

Respuesta

Cuestiones relacionadas