onfocus für die Formulareingabe, um die Rahmenfarbe zu ändern?

Question

Ich versuche, einen Farbrahmen zu einem Formularfeld hinzuzufügen, wenn ein Benutzer auf das Feld klickt, ich bin gut in HTML und Javascript, mit ein wenig PHP, aber meine CSS ist eigentlich ziemlich arm. Der Code für das Formular usw. ist unten. Ich würde es sehr schätzen, wenn jemand mich leiten oder mir helfen könnte. 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> 

Irgendwelche Gedanken?

Answer 1

Es wäre wahrscheinlich sauberer, eine Klasse mit onBlur und onFocus zu addieren und zu subtrahieren. Dann in der CSS-Klasse könnten Sie haben:

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

prüfen here für weitere Informationen über die Grenze Eigenschaften. (mit Entschuldigungen für diejenigen, die w3schools hassen, aber es ist ein angemessener Ort für diese Art von Referenz).

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

Answer 2

ich nicht empfehlen Inline-Stil wie diese verwenden und würde sogar empfehlen, die Ereignisse über Javascript/jquery Verdrahtung, aber ...

Sie können mit object.style.borderColor Hintergrundfarbe . Farbe ist nur die Schriftfarbe.

Das css-Markup in Kurzschrift ist nur 'Rand' oder speziell, wenn Sie die Rahmenfarbe von CSS setzen möchten, ist es 'Rahmenfarbe'. In Javascript wird das zu this.style.borderColor.

Answer 3

können Sie die :focus Pseudoklasse #q:focus {border:red 1px solid;} verwenden, aber wie Sie hier sehen können http://www.quirksmode.org/css/contents.html es wird nicht von ie 7 und darunter unterstützt. Um dies zu erreichen Kompatibilität Cross-Browser Sie jquery und den folgenden Code

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

Answer 4

nur CSS für Konturfarbe wie so verwenden können:

.class { 
    outline-color:#FF0; 
} 

Answer 5

Die Antwort von Carl-Michael Hughes ist das, was für mich endlich geklappt! Outline-Color ist die einzige Möglichkeit, die Fokus- "Rahmen" -Farbe zu setzen. Vielen Dank!