1

ブートストラップのフォームには、フォームの右側に非常に薄い影を残すボックス シャドウがあります。アイコンがフォームから離れて見えるように、右側の影だけを削除する必要があります。

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 に答える
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 に答える