Tengo el siguiente problema: tengo un formulario con tres campos de entrada de texto y quiero cambiar el color de fondo cuando uno de los campos tiene el foco y volver a configurarlo cuando pierde el foco. He llegado con el siguiente código:
HTML (simplificado):
<form> <input class="calc_input" type="text" name="start_date" id="start_date" /> <input class="calc_input" type="text" name="end_date" id="end_date" /> <input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" /> </form>jQuery
$(document).ready(function() { $('input:text').focus( function(){ $(this).css({'background-color' : '#FFFFEEE'}); }); $('input:text').blur( function(){ $(this).css({'background-color' : '#DFD8D1'}); }); });Gracias
#FFFFEEE no es un código de color correcto. Prueba con #FFFFEE en su lugar.
Lo que está tratando de hacer se puede simplificar a esto.
$('input:text').bind('focus blur', function() { $(this).toggleClass('red'); }); input{ background:#FFFFEE; } .red{ background-color:red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <input class="calc_input" type="text" name="start_date" id="start_date" /> <input class="calc_input" type="text" name="end_date" id="end_date" /> <input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" /> </form>Aún más fácil, solo CSS puede resolver el problema:
input[type="text"], input[type="password"], textarea, select { width: 200px; border: 1px solid; border-color: #C0C0C0 #E4E4E4 #E4E4E4 #C0C0C0; background: #FFF; padding: 8px 5px; font: 16px Arial, Tahoma, Helvetica, sans-serif; -moz-box-shadow: 0 0 5px #C0C0C0; -moz-border-radius: 5px; -webkit-box-shadow: 0 0 5px #C0C0C0; -webkit-border-radius: 5px; box-shadow: 0 0 5px #C0C0C0; border-radius: 5px; } input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-color: #B6D5F7 #B6D5F7 #B6D5F7 #B6D5F7; outline: none; -moz-box-shadow: 0 0 10px #B6D5F7; -webkit-box-shadow: 0 0 10px #B6D5F7; box-shadow: 0 0 10px #B6D5F7; }