April 16, 201214 yr Hi there everyone! I am having a serious brain-whacking problem... There might me an easy solution for this, but it's nowhere in my sight! Well, the thing is that I want to display a textarea and a select option inside a div which has inset box-shadows. I need to give a white bgcolor to the textarea and a bluish one to the area after that. If i apply a color to the background of the elements, it overlaps the box shadows. Here's my HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!--TITLE--> <title>Paste stuff</title> <!--STYLES--> <link rel="stylesheet" href="styles/test.css" /> <link rel="stylesheet" href="styles/htmlreset.css" /> </head> <body> <div class="wrapper"> <div class="prettybox"> <div class="textarea"> <textarea name="code" class="codesnip" placeholder="Write something..."></textarea> </div> <div class="langselect"> <label for="langselect">Select language</label> <ul> <li data-value="html"><a href="#">HTML</a></li> <li data-value="css"><a href="#">CSS</a></li> <li data-value="javascript"><a href="#">JavaScript</a></li> </ul> <input type="hidden" id="langInput" name="codelang" value="plain" /> </div> </div> </div> </body> </html> Now I tried applying a negative z-index to the child elements, and the shadows are displaying alright. But since I used -ve z-index, textarea is inaccessible and select buttons are not clickable! What can be the solution? You can have a looksie here : http://tinkerbin.com/oevsUN4K * { margin:0; padding:0; } body { background:#b3dbf0 ; } .wrapper { margin:0 auto; width:960px; text-align:center; } .prettybox { border:5px solid #eef8fd; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 1px 1px 5px 1px rgba(83, 113, 128, .3); -moz-box-shadow: inset 1px 1px 5px 1px rgba(83, 113, 128, .3); box-shadow: inset 1px 1px 5px 1px rgba(83, 113, 128, .3); position:relative; margin-top:40px; } .textarea { position:inherit; min-height:300px; max-height:600px; z-index:-1; } textarea { outline: none !important; min-height:300px; max-height:600px; width:100%; border:0; overflow:hidden; background:#fff; resize:none; position:inherit; z-index:12; } .langselect { background:#e2f3fb; border-top:1px solid #d6e9f2; z-index:-10; position:inherit; }
April 16, 201214 yr Author ^ Aww... I think that this is not possible with the position property. Anyone have any thoughts on using psuedo elements to accomplish this?
April 16, 201214 yr You don't need pseudo elements or that many wrappers! Try something along the lines of: http://tinkerbin.com/h9I7YA3r
April 17, 201214 yr Author Thanks for your suggestion Spitfire. Actually i had that many wrappers cause I was trying to 'kick' the main editable elements to the top while leaving the other div's for background, but it didn't work. Your idea is good too. But there's a gap between the layout , and also unwanted shadow's in the mid line/divider. That's unwanted in the final design!
Create an account or sign in to comment