如何使輸入域在活動時更改其設計？

假設我的背景顏色是紅色的。我希望輸入文本框顯示爲紅色，但是當您在輸入框內單擊以鍵入它時，就會變成一個正規文本框。當然，當你在輸入字段中不活動時，它應該回到原來的狀態（紅色）。如何使輸入域在活動時更改其設計？

它實際上是你經常看到的東西。我想過使用toggleclass？

我的輸入字段都附加了jQuery的

在此先感謝

來源

2011-01-10 Opoe

嘗試在CSS3的新的僞類的：重點選擇在這裏...

http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act

例如CSS ：

textarea:focus, input:focus { 
    background:#f00; 
    border:3px solid #0f0; 
}

希望幫助， -fs

來源

2011-01-10 19:53:19

這並不在IE7中工作，而不會在IE8與老文檔類型的工作。 – 2011-01-10 19:57:45

謝謝！它反過來工作，但它的工作原理！感謝您的幫助:) – Opoe 2011-01-10 19:59:09

@Stefan肯德爾：因爲'重點'？ – Opoe 2011-01-10 20:00:21

你可以用css class或style propertys來做到這一點。

CSS：

.red { 
    background-color: red; 
}

JS：

$(function() { 
    $('input').bind('focusin', function() { 
     $(this).removeClass('red'); 
    }).bind('focusout', function() { 
     $(this).addClass('red'); 
    }).trigger('focusout'); 
});

例如：

http://www.jsfiddle.net/NdyGJ/

來源

2011-01-10 19:54:37 jAndy

試試這個：

$('input').bind('focusin focusout', function() { 
    $(this).toggleClass('red'); 
});

我創建了一個例子在這裏： http://jsfiddle.net/FBPaA/

它的工作在Chrome，Firefox和IE

來源

2011-01-10 19:58:40 Thomas

如何使輸入域在活動時更改其設計？

回答

相關問題