Remove box shadow on right side - html

Question

The forms in bootstrap have a box shadow that leaves a very light shadow on the right side of the form. I need to remove that shadow on the right only so that the icon looks apart of the form.
JSFiddle: http://jsfiddle.net/MgcDU/6296/
Here's the CSS:
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
HTML:
<a href="#">
<div class="input-append">
<input class="span4" id="appendedInput" type="text" placeholder="Search..." style="border-right:0;">
<span class="add-on" style="background:white;border-left:0;"><i class="icon-search" style="color:#a3a3a3"></i></span>
</div>
</a>
Please help!

Answer 1

Here's how I fixed it: http://jsfiddle.net/MgcDU/6305/
CSS:
.input-append {
position: relative;
}
.input-append .add-on {
padding: 4px 8px;
background: white;
border-left: 0;
position: absolute;
right: -32px;
}

Answer 2

You can relatively position .add-on and give it a positive z-index value so that it appears over the right-edge of the <input> - it's not 100% seamless but with some minor changes you can probably make it work for you.
.input-append .add-on:last-child {
position: relative;
z-index: 5;
}
http://jsfiddle.net/MgcDU/6302/

Answer 3

Assign a spread-radius value of -1px to the box shadow and add an extra pixel to the y-offset.
<spread-radius>
This is a fourth <length> value. Positive values will
cause the shadow to expand and grow bigger, negative values will cause
the shadow to shrink. If not specified, it will be 0 (the shadow will
be the same size as the element).
MDN: box-shadow (source)
http://jsfiddle.net/MgcDU/6307/
CSS
input[type="text"] {
-webkit-box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
}

Answer 4

Try border-left:0px; becouse now yu dont have a px in element style

Answer 5

The best way is using box-shadow for "DIV.input-append" and make transparent background to input[type=text], example of using:
CSS:
.input-append{
position: relative;
padding: 2px;
width: 200px;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.input-append:before {
content: '';
position: absolute;
right: 8px;
width: 16px;
height: 16px;
background: url('https://cdn3.iconfinder.com/data/icons/eightyshades/512/11_Search-16.png') no-repeat;
}
.input-append input[type=text]{
background: none;
border:none;
}
HTML:
<div class="input-append">
<input class="span4" id="appendedInput" type="text" placeholder="Search...">
</div>
Demo: http://jsfiddle.net/EDLs7/