Two inputs next to each other with box-shadow - css

Question

I'm trying to add a box shadow on two inputs next to each other, but the shadows are overlapping the inputs.
I've tried to add a position: relative and z-index to the inputs, but then the shadow overlap the input with the lowest z-index.
Is there a way to prevent the shadow from overlapping the other input next to it?
HTML:
<form method="post">
<input name="email" type="text" >
<input name="send" type="submit">
</form>
CSS:
.email {
height:45px;
width: 395px;
float: left;
box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
-webkit-appearance: none;
}
.search {
height: 45px;
width: 60px;
float: right;
box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
cursor: pointer;
-webkit-appearance: none;
}
Here is an example of what i mean:
Thanks :)
- Jesper

Answer 1

You have to wrap the two inputs into divs :
<form method="post">
<div class="input--email">
<input name="email" type="text" class="email">
</div>
<div class="input--search">
<input name="send" type="submit" class="search">
</div>
</form>
And give them the same shadows :
.input--email, .input--search {
float: left;
box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
height: 45px;
}
.input--email{
width: 395px;
}
.input--search{
margin-left: 15px;
width: 60px;
}
.email, .search {
width: 100%;
height: 100%;
position: relative;
-webkit-appearance: none;
}
.search {
cursor: pointer;
}
Here is a fiddle : http://jsfiddle.net/VLy6Q/