Search bar - Fade out surrounding

[Dan808]

Hey,

 

I'm new to CSS and trying to figure something out. I want to have my search bar so when the user clicks it, the entire page fades except for the search bar. So although the bar itself doesn't change, it creates the effect of it being highlighted. If anyone could point me in the right direction that would be great!

 

Thanks

Dan

[Vishal_N]

Like This way 

https://codepen.io/vishalneswankar/pen/jObqGxO

[Ingolme]

1 hour ago, Vishal_N said:

Like This way 

https://codepen.io/vishalneswankar/pen/jObqGxO

The request was that the page fades out when the user focuses the search bar but the search bar remains visible. Your code just covers the whole page with black when the user clicks a button.

[Vishal_N]

3 hours ago, Ingolme said:

The request was that the page fades out when the user focuses the search bar but the search bar remains visible. Your code just covers the whole page with black when the user clicks a button.

Fixed

[Dan808]

 

10 hours ago, Vishal_N said:

Like This way 

https://codepen.io/vishalneswankar/pen/jObqGxO

Thanks, just like this, but with the fade happening when the user enters/exits the search box (not when the button is pressed)

[dsonesuk]

https://www.w3schools.com/code/tryit.asp?filename=GDXBXPZB02SZ

[Vishal_N]

14 hours ago, Dan808 said:

 

Thanks, just like this, but with the fade happening when the user enters/exits the search box (not when the button is pressed)

https://codepen.io/vishalneswankar/pen/jObqGxO

Ok with input focus kindly check same url

[Dan808]

11 hours ago, Vishal_N said:

https://codepen.io/vishalneswankar/pen/jObqGxO

Ok with input focus kindly check same url

Perfect.

@dsonesuk Your also works great.

Thanks to both of you!