Esta manera es algo más limpia, funciona bien en IE6, IE7 y FF, y se corren menos riesgos con la anchura variable del input:
Cita: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Example</title>
<style type="text/css">
input { border-style: solid none;
border-color: rgb(149, 149, 149) -moz-use-text-color;
border-width: 1px 0px;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: rgb(66, 66, 66);
background-color: rgb(255, 255, 255);
font-weight: normal;
background-image: url(input_bg.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 20px;
padding-top: 2px;
padding-left: 2px;
float: left;
}
.inputleft, .inputright {width: 4px;
height: 20px;
background-repeat: no-repeat;
float: left;
}
.inputleft {
background-image: url(input_cornet1.png);
}
.inputright {
background-image: url(input_cornet2.png);
}
</style>
</head>
<body>
<span id="boton">
<div class="inputleft"></div>
<input name="usuario" id="usuario" maxlength="50" size="38" type="text">
<div class="inputright"></div>
</span>
</body>
</html>
Y además sin trucos para explorer
.
Lo de important es que esa norma prevalece sobre cualquier otra del mismo tipo, pero IE6 no lo entiende, así que:
margin: 10px!important;
margin: 20px;
significa: FF lee 10px por el important, mientras que IE6 lee 20px, porque está después (atiende a la última declaración), y no entiende el important.
Saludos.
Mikel.