1

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

http://i.imgur.com/O35BdZv.png

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>

请帮忙！

4

6 回答 6

2

这是我修复它的方法：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;
}
于 2013-07-30T00:27:51.290 回答
1

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

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

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

于 2013-07-30T00:14:53.047 回答
1

为盒子阴影分配一个扩展半径值，-1px并为 y 偏移添加一个额外的像素。

<spread-radius>

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

MDN：盒子阴影（来源）

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);
}
于 2013-07-30T01:09:41.253 回答
0

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

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

于 2013-07-30T12:19:08.283 回答
0

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

于 2013-07-29T23:38:21.167 回答
0

最好的方法是对“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/

于 2013-07-29T23:54:19.200 回答