CODEWITHSUNDEEP
javascriptcolorsborderonfocus
turnt84
turnt84

Reputation: 1

How to change the border color of a full div when on focus?

I'm new to development so this may be a simple answer. I'm trying to figure out how to change the border color of an entire div when in focus/active. I am able to change the text box border but that seems to be the only answers I can find. Any help is appreciated. Thanks!

Upvotes: 0

Views: 5294

Answers (2)

Matt Butler
Matt Butler

Reputation: 476

CSS Version

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

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

Javascript Version

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

Although both are effective, I would only recommend the javascript method if you are changing something other than the physical appearance of the div.

--- Edit for below comment ---

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";
}

BLUR (deselect)

//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";
}

SEE IT IN ACTION: https://jsfiddle.net/0h8zyhba/1/

Upvotes: 0

Jeff Tabachnick
Jeff Tabachnick

Reputation: 153

In your css file..

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

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

You can change 'black' to whichever color you prefer.

Upvotes: 1

Related Questions