Esquinas redondeadas para usar el radio de borde.htc para IE
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 - neighter redondeado ni bordes simples. Cuando elimino el estilo CSS para #RightColumn, IE muestra un campo de entrada con esquinas redondeadas. Pero necesito fondo para # RightColumn.
¿Cómo puedo crearlo?
6 answers
Oh señor, no lo hagas de esta manera. Los archivos de HTC nunca son una buena idea por razones de rendimiento y claridad, y está utilizando demasiados parámetros específicos del proveedor para algo que se puede hacer fácilmente a través del navegador todo el camino de vuelta a 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 border:none aplicado en su lugar.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-12 00:21:05
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 2011 actualizar y despertar por favor!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-26 10:45:54
Si está utilizando para cierto campo de texto, use la clase
<style>
.inputForm{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
</style>
Y en código html use
<input type="text" class="inputForm">
O si desea hacer esto para todo el tipo de entrada campo de texto significa usar
<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">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-09 08:56:59
Eso no funcionará en IE
PIE hace que Internet Explorer 6-8 capaz de renderizar varios de los la mayoría de las características útiles de la decoración de CSS3.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-07-18 09:16:31
W3C doc dice con respecto a la propiedad" border-radius ": "compatible con IE9+, Firefox, Chrome, Safari y Opera".
Por lo tanto, asumo que estás probando en IE8 o inferior.
Para "elementos regulares" hay una solución compatible con IE8 y otros navegadores antiguos/pobres. Véase más adelante.
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;
}
Necesitas crear ambos roundedCorner_right.png & Redondeadocorner_left.png. Estos son el trabajo alrededor de IE8 (&abajo) para falsificar la característica de esquina redondeada.
Así que en este ejemplo anterior aplicamos la esquina redondeada izquierda al primer elemento span en el div que contiene, y aplicamos la esquina redondeada derecha al div que contiene. Estas imágenes se superponen a las "esquinas cuadradas" proporcionadas por el navegador y dan la ilusión de ser parte de un elemento redondeado.
La idea para las entradas sería hacer la misma lógica. Sin embargo, la entrada es un elemento vacío," el elemento está vacío, solo contiene atributos", en otras palabras, no se puede envolver un intervalo 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 los elementos de entrada en IE
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:11
Escribir desde el teléfono, pero curvycorners es realmente bueno, ya que agrega sus propios bordes solo si el navegador no lo soporta por defecto. En otras palabras, los navegadores que ya admiten algunos CSS3 utilizarán su propio sistema para proporcionar esquinas.
https://code.google.com/p/curvycorners /
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-20 18:17:06