移除右侧的盒子阴影答案

【问题标题】：Remove box shadow on right side移除右侧的盒子阴影
【发布时间】：2013-07-30 20:19:08
【问题描述】：

bootstrap 中的表单有一个盒子阴影，在表单的右侧留下一个非常浅的阴影。我只需要删除右侧的阴影，以便图标看起来与表单分开。

JSFiddle：http://jsfiddle.net/MgcDU/6296/

这是 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>

请帮忙！

【问题讨论】：

也遇到了类似的问题；我通过添加一个绝对定位的元素来修复它，该元素宽度为几个像素，并且在用户与功能交互时与阴影重叠。我使用jQuery来触发定位。
肯定有比这更好的方法...
我遇到的问题是有时我需要补丁，有时不需要（类似于您基于输入焦点的情况）。因此，当我触发需要补丁的事件时，我还显示了 HTML 补丁，然后在触发器再次触发时将其隐藏。其实并不难。

标签： html css twitter-bootstrap

【解决方案1】：

这是我修复它的方法：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;
}

【讨论】：

【解决方案2】：

您可以相对定位 .add-on 并给它一个正的 z-index 值，以便它出现在 <input> 的右边缘上 - 它不是 100% 无缝的，但通过一些小的改动你可能会使其工作给你。

.input-append .add-on:last-child {
    position: relative;
    z-index: 5;
}

http://jsfiddle.net/MgcDU/6302/

【讨论】：

我这样做了，但不同的是：http://jsfiddle.net/MgcDU/6305/

【解决方案3】：

为盒子阴影指定一个扩展半径值-1px，并在y-offset上添加一个额外的像素。

<spread-radius>

这是第四个<length> 值。正值将导致阴影扩大并变大，负值会导致影子缩小。如果未指定，则为 0（阴影将与元素大小相同）。

MDN: box-shadow（来源）

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);
}

【讨论】：

【解决方案4】：

试试border-left:0px;，因为现在你没有元素样式的像素

【讨论】：

我试过了（我认为你的意思是右边框）但没有用。

【解决方案5】：

最好的方法是对“DIV.input-append”使用 box-shadow 并为 input[type=text] 设置透明背景，使用示例：

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>

演示：http://jsfiddle.net/EDLs7/

【讨论】：

【解决方案6】：

请查看此jsfiddle 演示解决您的问题

http://jsfiddle.net/MgcDU/6320/

【讨论】：