3

Bootstrap 3 の input-group 要素にキャレットを適用しようとしましたが、これまでのところ失敗しています。挿入された疑似要素にテーブルセル表示を使用してみたり、絶対配置を試したり、コンテンツ プロパティを使用して、好みの CSS トライアングル キャレットの代わりに Web フォント キャレットを表示したりしました。これについて頭を包むことはできません。

これが JSFiddle です(赤い境界線は、キャレットが表示されると予想される場所です)。

.input-group .input-group-addon:last-child:before,
.input-group .input-group-btn:last-child:before,
.input-group .input-group-addon:not(:last-child):before,
.input-group .input-group-btn:not(:last-child):before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  margin: auto;
  top: 0;
  bottom: 0;
  z-index: 1000;
}

.input-group .input-group-addon:last-child:before,
.input-group .input-group-btn:last-child:before {
  border-right-color: red;
  right: 0;
}

.input-group .input-group-addon:not(:last-child):before,
.input-group .input-group-btn:not(:last-child):before {
  border-left-color: red;
  left: 0;
}

編集:答えに基づいて、IE10以下を除くすべてで正常に機能するスタイルを変更しました。IE は、 http://jsfiddle.net/W8mFS/3/で見られるように、左揃えのinput-groupキャレットをオフセットします。これを修正する方法はありますか？4px

更新された CSS:

.input-group.input-group-caret span:after,
.input-group.input-group-caret > input + span:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 10px solid transparent;
}

.input-group.input-group-caret > input + span:before {
  border-right-color: #cccccc;
  margin-left: -20px;
}

.input-group.input-group-caret > input + span:empty:before {
  margin-left: -44px;
}

.input-group.input-group-caret > input + span:after {
  border-left-color: transparent;
}

.input-group.input-group-caret span:after {
  border-left-color: #cccccc;
}

.input-group.input-group-caret .input-group-addon {
  padding: 0;
}

.input-group.input-group-caret .input-group-addon i {
  font-style: normal;
  margin-left: 12px;
  padding-right: 12px;
}

.input-group.input-group-caret .input-group-addon:empty {
  padding-left: 24px;
}

更新:input-groupここにサイジング JSFiddleを追加: http://jsfiddle.net/W8mFS/4/。

LESS コードは、Bootstrap 変数を使用してキャレットのサイズ、マージン、パディングを制御する方法を示しています。

@import "path_to_bootstrap/less/mixins";
@import "path_to_bootstrap/less/variables";

// input-group caret size
@caret-size-base:  ceil(@font-size-base * 0.70);  // ~10px;
@caret-size-large: ceil(@caret-size-base * 1.20); // ~12px;
@caret-size-small: ceil(@caret-size-base * 0.80); // ~8px;

// input-group caret
.input-group.input-group-caret {
  span:after,
  > input + span:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;

    // v-align to middle
    top: 0;
    bottom: 0;
    margin: auto;

    border: @caret-size-base solid transparent;
  }

  > input + span:before { border-right-color: @input-border; margin-left: -( 2 * @caret-size-base ); }                  // right aligned
  > input + span:empty:before { margin-left: -(( 2 * @padding-base-horizontal ) + ( 2 * @caret-size-base )); }          // right aligned
  > input + span:after  { border-left-color: transparent; }                                                             // right aligned
  span:after  { border-left-color: @input-border; }                                                                     // left aligned

  // sizing
  &.input-group-sm {
    span:after,
    > input + span:before {
      border: @caret-size-small solid transparent;
    }

    > input + span:before { border-right-color: @input-border; margin-left: -( 2 * @caret-size-small ); }               // right aligned
    > input + span:empty:before { margin-left: -(( 2 * @padding-base-horizontal ) + ( 2 * @caret-size-small )); }       // right aligned
    > input + span:after  { border-left-color: transparent; }                                                           // right aligned
    span:after  { border-left-color: @input-border; }                                                                   // left aligned
  }

  &.input-group-lg {
    span:after,
    > input + span:before {
      border: @caret-size-large solid transparent;
    }

    > input + span:before { border-right-color: @input-border; margin-left: -( 2 * @caret-size-large ); }               // right aligned
    > input + span:empty:before { margin-left: -(( 2 * @padding-base-horizontal ) + ( 2 * @caret-size-large )); }       // right aligned
    > input + span:after  { border-left-color: transparent; }                                                           // right aligned
    span:after  { border-left-color: @input-border; }                                                                   // left aligned
  }

  // input-group caret alignment fixes
  .input-group-addon {
    padding: 0;

    i {
      font-style: normal;
      margin-left: @padding-base-horizontal;
      padding-right: @padding-base-horizontal;
    }

    // fix-up alignment of empty addon
    &:empty {
      padding-left: 2 * @padding-base-horizontal;
    }
  }
}
4

1 に答える 1

6

.input-group > input + span:before右揃えの良いセレクターになりそうです。しかし、 box-sizing : border-box ( Bootstrap 3 が box-sizing: border-box に切り替わったのはなぜですか? ) がキャレット/フォームを壊すという問題もあります。(幅には :after と :before も含まれますか?)

参照: http://bootply.com/83702

.input-group > input + span:before {
  display: inline-block;
  width: 0;
  height: 0;
  border-right: 10px solid red;
  border-top: 10px solid transparent;
  border-left: 0 dotted;
  border-bottom: 10px solid transparent;

  vertical-align: middle;
  margin-left: 2px;
  content:'';
}
于 2013-09-27T21:54:32.053 に答える