使用CSS：after伪选择器在Bootstrap 3输入组中显示定向插入符

Question

我一直在尝试将Bootstrap 3中的插入符号应用于输入组元素。尝试对插入的伪元素使用表单元格显示，尝试绝对定位，尝试使用content属性显示Web字体插入符号，而不是我喜欢的CSS三角形插入符号。只是不能把我的头缠在这一个。

这是一个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偏移了左对齐的input-group插入符号，4px如http://jsfiddle.net/W8mFS/3/所示。任何想法如何解决这个问题？

更新的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;
    }
  }
}

Answer 1

似乎.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:'';
}