Hola buenas tengo una pequeña duda. Es sobre la propiedad border-radius
la cual necesito usar para hacer un campo de busqueda redondeado.
Seria bastante sencillo hacerlo con alguna imagen pero quiero que en un futuro poder animarlo con animate() de jquery. y otra dificultad seria que solo seran los bordes redondeados en las esquinas izquierdas.
ee usado el siguiente codigo en Html y CSS
Código CSS:
Ver original#text-search{
border-top-left-radius:6px;
border-bottom-left-radius:6px;
-moz-border-top-left-radius:6px;
-moz-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px;
-webkit-border-bottom-left-radius:6px;
background:#171717 url(images/search-bg.png) repeat-x;
width:167px;
height:28px;
float:right;
}
la imagen del background es una especie de degradado con luz. Como ven agregue el -moz y el -webkit para poder aumentar el rango de compatibilidad
ahora bien también lo hice mediante jquery para poder estar seguro asi que con esto es seguro de que sea soportado por todos los navegadores ???
Código Javascript
:
Ver original$(document).ready(function(){
$('#text-search').css({
'border-top-left-radius': '6px',
'border-bottom-left-radius': '6px'
});
});
gracias por leer. Soy nuevo en esto