redondo - input redondeado css

Esquinas redondeadas para<input type=''text''/> usando border-radius.htc para IE

Question

Quiero crear un campo de entrada con esquinas redondeadas.

HTML:

<div id="RightColumn">
<input type="text" class="inputForm" />
</div>

CSS:

.inputForm
{
    -moz-border-radius:10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
    -khtml-border-radius: 10px; /* KHTML */
    border-radius: 10px; /* CSS3 */
    behavior:url("border-radius.htc");
}

#RightColumn
{
    background-color:White;
}

Pero IE no muestra ningún borde para los campos de entrada: fronteras más redondeadas ni simples. Cuando elimino CSS-style para #RightColumn, IE muestra un campo de entrada con esquinas redondeadas. Pero necesito antecedentes para #RightColumn.

¿Cómo puedo crearlo?

Answer 1

Escribir desde el teléfono, pero curvycorners es realmente bueno, ya que agrega sus propios bordes solo si el navegador no lo admite de manera predeterminada. En otras palabras, los navegadores que ya soportan algunos CSS3 usarán su propio sistema para proporcionar esquinas.
code.google.com/p/curvycorners

Answer 2

Oh señor, no lo hagas de esta manera. Los archivos HTC nunca son una buena idea por razones de rendimiento y claridad, y está usando demasiados parámetros específicos del proveedor para algo que se puede hacer fácilmente desde todos los navegadores hasta IE6.

Aplique una imagen de fondo a su campo de entrada con las esquinas redondeadas y haga que el color de fondo del campo sea transparente con el borde: no se aplica en su lugar.

Answer 3

Sin embargo, eso no funcionará en IE <9, sin embargo, puede hacer que las IE sean compatibles con:

CSS3Pie

PIE hace que Internet Explorer 6-8 sea capaz de representar varias de las funciones de decoración más útiles de CSS3.

Answer 4

si está usando para cierto campo de texto, entonces use la clase

<style>
  .inputForm{
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
   }
</style>

y en el uso del código html

 <input type="text" class="inputForm">

o si desea hacer esto para todo el campo de texto tipo de entrada significa el uso

<style>
    input[type="text"]{
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
    }
 </style>

y en código html

<input type="text" name="name">

Answer 5

El documento W3C dice respecto de la propiedad "border-radius" : "compatible con IE9 +, Firefox, Chrome, Safari y Opera".

Por lo tanto, supongo que estás probando en IE8 o inferior.

Para los "elementos regulares" hay una solución compatible con IE8 y otros navegadores antiguos / pobres. Vea abajo.

HTML:

<div class="myWickedClass">
  <span class="myCoolItem">Some text</span> <span class="myCoolItem">Some text</span> <span class="myCoolItem"> Some text</span> <span class="myCoolItem">Some text</span>
</div>

CSS:

.myWickedClass{
  padding: 0 5px 0 0;
  background: #F7D358 url(../img/roundedCorner_right.png) top right no-repeat scroll;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal 11px Verdana, Helvetica, sans-serif;
  color: #A4A4A4;
}
.myWickedClass > .myCoolItem:first-child {
  padding-left: 6px;
  background: #F7D358 url(../img/roundedCorner_left.png) 0px 0px no-repeat scroll;
}
.myWickedClass > .myCoolItem {
  padding-right: 5px;
}

Necesita crear tanto roundedCorner_right.png como roundedCorner_left.png . Estos son los mejores para IE8 (y más abajo) para falsificar la característica de esquina redondeada.

Entonces en este ejemplo de arriba aplicamos la esquina redondeada a la izquierda al primer elemento de tramo en el div que contiene, y aplicamos la esquina redondeada a la derecha que contiene div. Estas imágenes se superponen a las "esquinas de esquinas" provistas por el navegador y dan la ilusión de ser parte de un elemento redondeado.

La idea de las entradas sería hacer la misma lógica. Sin embargo, la entrada es un elemento vacío, "el elemento está vacío, contiene solo atributos", en otras palabras, no puede envolver un lapso en una entrada como <input><span class="myCoolItem"></span></input> para luego usar imágenes de fondo como en el ejemplo anterior.

Por lo tanto, la solución parece ser hacer lo contrario: envolver la entrada en otro elemento. ver esta respuesta esquinas redondeadas de elementos de entrada en IE

Answer 6

    border-bottom-color: #b3b3b3;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #b3b3b3;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #b3b3b3;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #b3b3b3;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 1px;`

... ¿A quién le importa IE6 estamos en la actualización 2011 y despertar por favor!