CODEWITHSUNDEEP
javascripthtmlcssoutline
Barry Watts
Barry Watts

Reputation: 794

CSS outline solely around parent element

I have a div that has additional child divs attached to it with positioning outside of parent div.

I want the parent div to have an outline onclick, but the outline extends around the child divs.

Is there any way to have the outline solely around the parent div.

I cant use border as the parent div already has a border, I only want to use outline to hightlight the clicked div.

Fiddle: jsfiddle.net/PZ7eW/1

Upvotes: 2

Views: 1878

Answers (1)

Teemu
Teemu

Reputation: 23396

If I've understood your question correctly, you need to change border when the div is active. outline covers the rectangle enclosing all elements in the element.

EDIT

Due to comments, it looks like you can't change the border nor use outer wrapper for the "outline". You can try inner positoned element instead. Please take a look at the fiddle.

Also div can't normally receive focus, hence it can't be blurred either. You can force any element to receive focus by setting a tabindex for the element.

Looks like outline behaves differently in different browsers: In FF it covers the rectangle enclosing all elements in the element, in Chrome and IE it covers only the parent element (which is expected behavior), in Opera outline occurs around every child element too. Hence the answer to the original question is: not possible to achieve this simply changing the outline.

A demo at jsFiddle.

Upvotes: 2

Related Questions