Bien, pues aqui pongo varias cosillas, el ensanchamiento es de 25pixeles, esta exagerado para que se aprecie bien.
El efecto como queda simplemente ensanchandolo, vereis que queda super cutre:
http://sites.google.com/site/danyof/Home/pruebagrosor02.html?attredirects=0&d=1
El efecto solucionado moviendo la posicion del cuadro de texto a la vez que se ensancha:
http://sites.google.com/site/danyof/Home/pruebagrosor.html?attredirects=0&d=1
Pensais que funcionara bien en todos los navegadores?
He probado en:
Firefox
Chrome
Internet explorer, y se ve bien en los tres.... pero no estoy seguro al 100% de si esto es lo mas correcto!
Aqui os pongo las dos funciones que uso para que no se note el movimiento:
Código:
Inicialmente el cuadro esta a 100px de la derecha y 100px de arriba:
...
#dos{border-width:1px; top:100px; left:100px;}
...
Y aqui abajo las funciones
function sobre(){
document.getElementById('dos').style.borderWidth="25px";
document.getElementById('dos').style.top="76px";
document.getElementById('dos').style.left="76px";
}
function quita(){
document.getElementById('dos').style.borderWidth="1px";
document.getElementById('dos').style.top="100px";
document.getElementById('dos').style.left="100px";
Y aqui os pongo el codigo entero de la segunda forma por si os apetece verlo entero
Código:
<html>
<head>
<style type="text/css">
input{border:solid; position:absolute;}
#dos{border-width:1px; top:100px; left:100px;}
</style>
<script type="text/javascript">
function sobre(){
document.getElementById('dos').style.borderWidth="25px";
document.getElementById('dos').style.top="76px";
document.getElementById('dos').style.left="76px";
}
function quita(){
document.getElementById('dos').style.borderWidth="1px";
document.getElementById('dos').style.top="100px";
document.getElementById('dos').style.left="100px";
}
</script>
</head>
<body>
<form>
<input type="text" id="dos" onMouseOver="sobre();" onMouseOut="quita();" value="TEXTO">
</form>
</body>
</html>