ボーダーカラーを変更するためのフォーム入力用のonfocus？

Question

フォームフィールドに色の枠線を追加しようとしていますが、ユーザーがフィールドをクリックしたときに、htmlやjavascriptを使用していて、少しPHPがありますが、CSSは実際には非常に貧弱です。フォームなどのコードは以下のとおりです。もし誰かが私を指示したり助けてくれたら、本当に感謝しています。 CODE：

<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> 

任意の考え？

Answer 1

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/

Answer 2

私はあなたがobject.style.borderColorと背景色を設定することができ、このようにインラインスタイルを使用することはお勧めしませんでもジャバスクリプト/ jqueryのが、...

を経由してイベントをアップ配線推薦。色はフォントの色のみです。

簡略化したCSSマークアップは「境界線」にすぎません。具体的には、境界線の色をCSSから設定する場合は「境界線の色」です。 javascriptではthis.style.borderColorに変わります。

Answer 3

:focus疑似クラス#q:focus {border:red 1px solid;}を使用できますが、ここに表示されているようにhttp://www.quirksmode.org/css/contents.htmlは7以下でサポートされていません。あなたはjqueryのを使用することができ、クロスブラウザの互換性と、次のコードを達成するために

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

Answer 4

ちょうどそうのようなアウトラインの色のCSSを使用します。

.class { 
    outline-color:#FF0; 
} 

Answer 5

カール・マイケル・ヒューズからの答えは最終的に私のために働いていたものです！輪郭線の色を設定する唯一の方法は輪郭線です。ありがとう！