Hola a todos!
Espero que puedan ayudarme con este problema, necesito hacer varios elementos de formulario personalizados, por ejemplo aquí están los botones y submits:
Código CSS:
Ver originalinput[type="button"],input[type="submit"]{
background: url(img/button.png) no-repeat top left;
background-size:100% 25px;
width: 100px;
height: 25px;
padding-top:3px;
padding-left:5px;
padding-right:5px;
border: 0px;
color:#DDD;
font-size:16px;
font-weight:bold;
}
y aquí los textos y contraseñas:
Código CSS:
Ver originalinput[type="text"],input[type="password"]{
background: url(img/input.png) no-repeat top left;
width: 160px;
height: 20px;
padding-left:5px;
padding-right:5px;
border: 0px;
}
como verán el fondo de la las entradas de textos tiene una imagen llamada "input.png" la cual tiene un ancho de 160px
El problema comienza cuando quiero hacer elementos de tamaños mayores o menores de 160 pixels, ya que la imagen se deforma.
La pregunta es si es posible hacer que la imagen se estire pero solo al medio -o- si recorto la imagen en partes y hacer que las esquinas se mantengan... algo así como una inflamación liquida, no se si se entiende.
Y de ser posible, que
no sea con CSS3
Agradezco cualquier ayuda!