Question

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>

请帮忙！

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

Answer 2

你可以相对定位.add-on并给它一个正z-index值，使它显示在<input>的右边缘 - 它不是100％无缝但有一些小的变化你可能会让它适合你。

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

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

Answer 3

将展开半径值-1px指定给框阴影，并为y偏移添加一个额外的像素。

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

Answer 4

尝试border-left:0px;，因为现在你没有元素风格的px

Answer 5

最好的方法是使用box-shadow作为“DIV.input-append”并使透明背景输入[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/

Answer 6

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

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

删除右侧的框阴影

6 个答案:

CSS