Dan808 0 Posted April 15, 2020 Report Share Posted April 15, 2020 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 Quote Link to post Share on other sites
Vishal_N 0 Posted April 17, 2020 Report Share Posted April 17, 2020 Like This way https://codepen.io/vishalneswankar/pen/jObqGxO Quote Link to post Share on other sites
Ingolme 1,020 Posted April 17, 2020 Report Share Posted April 17, 2020 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. Quote Link to post Share on other sites
Vishal_N 0 Posted April 17, 2020 Report Share Posted April 17, 2020 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 Quote Link to post Share on other sites
Dan808 0 Posted April 17, 2020 Author Report Share Posted April 17, 2020 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) Quote Link to post Share on other sites
dsonesuk 913 Posted April 17, 2020 Report Share Posted April 17, 2020 https://www.w3schools.com/code/tryit.asp?filename=GDXBXPZB02SZ Quote Link to post Share on other sites
Vishal_N 0 Posted April 18, 2020 Report Share Posted April 18, 2020 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 Quote Link to post Share on other sites
Dan808 0 Posted April 18, 2020 Author Report Share Posted April 18, 2020 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! Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.