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 : [B]http://tinkerbin.com/oevsUN4K[/B]
* { 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;
}