Как изменить цвет рамки полного div при фокусировке?

Question

Я новичок в развитии, так что это может быть простой ответ. Я пытаюсь понять, как изменить цвет границы всего div, когда он находится в фокусе/активен. Я могу изменить границу текстового поля, но, похоже, это единственные ответы, которые я могу найти. Любая помощь приветствуется. Спасибо!

Answer 1

В файле CSS ..

div:focus { 
    border: 1px solid black; 
} 

div:active { 
    border: 1px solid black; 
} 

Вы можете изменить 'черный' в зависимости от того, цвет вы предпочитаете.

Answer 2

CSS Версия

div:focus { 
    border: 1px solid black; 
} 

div:active { 
    border: 1px solid black; 
} 

Javascript Версия

//doSomething is the name of the function to get fired 
    document.getElementById("myDiv").addEventListener("focus", doSomething); 

//whatIsActive will return the element type that is active at the moment 
    var whatIsActive = document.activeElement; 

http://www.w3schools.com/jsref/prop_document_activeelement.asp

Хотя оба эффективен, я бы только рекомендовать яваскрипт метод, если вы хотите изменить что-то другое, чем физический вид div.

--- РЕДАКТИР ниже комментарий ---

FOCUS

//listens for focus on textbox 
document.getElementById('myTextbox').addEventListener("focus", changeDivColor); 

//this is fired when the textbox is focused 
function changeDivColor(){ 
    document.getElementById('myDiv').style.borderColor = "red"; 
} 

Размытие (Отменить)

//listens for blur on textbox 
document.getElementById('myTextbox').addEventListener("blur", revertDivColor); 

//this is fired when the textbox is no longer focused 
function revertDivColor(){ 
    document.getElementById('myDiv').style.borderColor = "black"; 
} 

в действии:https://jsfiddle.net/0h8zyhba/1/