Question

So I have a text area with borders that look something like this:

Any idea how I should go about changing border color on focus?

Obviously it would be easy if it had regular css border instead of images, but I’m not sure how to do it like this?

Answer 1

You can do it using the same kind of method you would use for non-image implementations:

.chatBox {
    background-image: url('border.png');
}

.chatBox:hover, .chatBox:focus {
    background-image: url('border-highlight.png');
}

Obviously your border is more complex than this, but you can see the concept is the same. If you are using nested elements, it should still work. If you get stuck, show some code and I’ll do my best to help.