CODEWITHSUNDEEP
htmlcss
Andrew Truckle
Andrew Truckle

Reputation: 19097

How to add outer colour around this div when it has focus?

If you look here and click in the password box it has a yellow focus rectangle:

Focus

The control in question is a input but I want to do it to a div. Take this code:

<div class="bbp-template-notice error" role="alert" tabindex="-1">
    <ul>
        <li><strong>ERROR</strong>: Your reply cannot be empty.</li>
        <li><strong>ERROR</strong>: Please solve Captcha correctly.</li>
    </ul>
</div>

What CSS styling must I apply to get this outer yellow?

At the moment I have:

#bbpress-forums .bbp-template-notice {
    padding: 2px !important;
    border: solid 1px #000 !important;
    background: #708090;
}

Which gives this result:

Error Styling

Any guidance gratefully appreciated.

Upvotes: 0

Views: 52

Answers (2)

Hiren Karangiya
Hiren Karangiya

Reputation: 94

This is the code for adding a border on div focus.

.bbp-template-notice {
    padding: 2px !important;
    border: 1px solid #000;
    background: #708090;
    transition: all 0.5s ease-out;
}


.bbp-template-notice:focus {
    outline: #ff0 solid 4px !important;
    transition: all 0.5s ease-out;
}

Upvotes: 2

wouch
wouch

Reputation: 1241

As Paulie_D advised, outline property is what you're looking for when the element is focused. If you need to know what options are available for the outline property, W3 Schools has great visuals that you can review

Upvotes: 2

Related Questions