Two inputs next to each other with box-shadow

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/