onfocus爲表單輸入更改邊框顏色？

我想添加一個顏色邊框到表單字段，當用戶點擊字段時，我很擅長使用一點PHP的HTML和JavaScript，但我的CSS其實很差。表格等的代碼如下。如果有人能夠指導或幫助我，我將不勝感激。 CODE：onfocus爲表單輸入更改邊框顏色？

<form id="search" action="http://www.bkslap.com/search/results.php" id="cse-search-box"> 
<input name="q" type="text" id="q" autocomplete="on" size="56" style="color:#ccc;" maxlength="128" id="q" 
onblur="this.value = this.value || this.defaultValue; this.style.color = '#ccc';" 
onfocus="this.value=''; this.style.color = '#9933FF';" 
value="Search" /> 
</form>

有什麼想法？

來源

2011-01-05 Niall

用onBlur和onFocus增加和減少一個類可能會更乾淨。然後在CSS類，你可以有：

.focus { 
background: yellow; 
color: #000; 
border: 1px solid red; 
}

檢查here上邊框屬性的更多信息。（對那些討厭w3schools的人表示歉意，但對於這種類型的參考來說這是一個合理的位置）。

http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/

來源

2011-01-05 21:14:16 JakeParis

同意移動樣式和JavaScript可能包括。當然你會花更多的時間，但它會爲你節省很多痛苦。 – 2011-01-05 21:16:21

謝謝，我明白了，謝謝你和sotiris（下） – Niall 2011-01-05 21:31:25

太棒了！您可以投票給我，或者選中我的答案旁邊的複選框。或者爲什麼不呢？ – JakeParis 2011-01-05 21:34:04

我不推薦使用內嵌樣式像這樣，甚至會推薦連接最多通過javascript/jQuery的事件，但...

您可以設置背景顏色object.style.borderColor 。顏色只是字體顏色。

簡寫的css標記只是'邊框'，或者特別是如果你想從CSS設置邊框顏色，它是'邊框顏色'。在JavaScript中轉向this.style.borderColor。

來源

2011-01-05 21:15:46

您可以使用:focus僞類#q:focus {border:red 1px solid;}但正如您在這裏可以看到http://www.quirksmode.org/css/contents.html它不支持ie 7及以下版本。爲了實現跨瀏覽器兼容，你可以使用jQuery和下面的代碼

$('#q').focus(function() { 
    $('#q').css('border','1px solid red'); 
});

來源

2011-01-05 21:17:26 Sotiris

您能否告訴我，當我在輸入字段外單擊時，如何使輸入字段成爲上一個邊框顏色。 – SOURAV 2015-02-28 10:05:45

只需使用CSS的輪廓顏色，像這樣：

.class { 
    outline-color:#FF0; 
}

來源

2012-09-27 18:36:49

這是所有瀏覽器的正確答案。見http://www.w3schools.com/cssref/pr_outline.asp;）有一個關於IE8支持的說明 - 你必須指定DOCTYPE。 – 2014-06-14 08:06:50

從卡爾 - 邁克爾·休斯的答案是什麼終於爲我工作！輪廓顏色是設置焦點「邊框」顏色的唯一方法。謝謝！

來源

2013-07-26 21:55:36 Hank

onfocus爲表單輸入更改邊框顏色？

回答

相關問題