| Respuesta: Duda con campo input de formulario
otra alternativa...
--------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES" xmlns:fw="http://www.tuenti.com/fw" lang="es_ES">
<head><title>final</title>
<style type='text/css'>
ul{list-style:none;}
input{border:0;font-size:14px;color:blue;padding:7px 6px;width:148px;margin:0 0 5px 0;background:#FFF;}
li{margin:0 5px 0 0;width:160px;float:left}
li{position:relative}
.inputLabel{font-size:13px;line-height:16px;font-weight:normal;-moz-text-shadow:none;-webkit-text-shadow:none;text-shadow:none;color:#666;cursor:text;position:absolu te;left:8px;top:10px}
span.inputDecorar input{font-size:13px;border:solid 1px #43698f;border-top-color:#274b5a;-webkit-box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 5px -5px rgba(0,0,0,0.5) inset;box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 5px -5px rgba(0,0,0,0.5) inset;-moz-box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 3px -5px rgba(0,0,0,0.5) inset;background:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:5px;width:144px;height:18px}
span.inputDecorar.focus input{
-webkit-box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 5px -5px rgba(0,255,0,0.5) inset,0 0 15px -3px rgba(0,58,150,0.9);
box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 5px -5px rgba(0,255,0,0.5) inset,0 0 15px -3px rgba(0,58,150,0.9);
-moz-box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 3px -5px rgba(0,255,0,0.5) inset,0 0 15px -3px rgba(0,58,150,0.9)}
.focus .inputLabel{color:#000;opacity:.3;filter:alpha(opa city=30);}
.filled .inputLabel{display:none}
</style>
<script type="text/javascript" charset="utf-8">
function verificar(el) {
if (typeof el == 'string')
return document.getElementById(el);
return el;
}
function inlineLabelHandler(dom, domRelated){
var autofillIntervalPeriod = 200;
var changeInterval = null;
dom.onkeyup = function() {
var isFilled = this.value.length > 0;
var isFilledIndicated = this.parentNode.className.indexOf(' filled') >= 0;
if (typeof domRelated !== 'undefined'){
domRelated.onkeyup();
}
if (isFilled === isFilledIndicated) {return;}
if (isFilled && !isFilledIndicated) {this.parentNode.className += ' filled';}
else {this.parentNode.className = this.parentNode.className.replace(' filled', '');}
};
dom.onfocus = function(dom){
this.parentNode.className += ' focus';
this.onkeyup();
if (changeInterval !== null) {clearInterval(changeInterval);}
var self = this;
changeInterval = setInterval(function(){
self.onkeyup();delete self;
},
autofillIntervalPeriod);
};
dom.onblur = function() {
this.parentNode.className = this.parentNode.className.replace(' focus', '');
this.onkeyup();
if (changeInterval !== null) {
clearInterval(changeInterval);
changeInterval = null;
}
};
dom.onkeyup();
}
window.onload = function() {
var password = verificar('input_password');
if (password){
inlineLabelHandler(password);
var email = verificar('email');
if (email){
inlineLabelHandler(email, password);
if (verificar('container_login_tu') === null) {
verificar('email').focus();
}
}
}
}
</script>
</head>
<body>
<ul>
<li>
<span class="inputDecorar">
<label class="inputLabel" for="email">Email</label>
<input id="email" name="email" type="text">
</span>
</li>
<li>
<span class="inputDecorar">
<label class="inputLabel" for="input_password">Contrasenia</label>
<input id="input_password" name="input_password" value="" type="password">
</span>
</li>
</ul>
</body>
</html>
--------------------------------------
los colores ya es a gusto de los usuarios jejeej saludos :D
Última edición por computer_programme; 24/01/2012 a las 13:21
Razón: aniadiendo texto
|