Использование псевдоселектора CSS :after для отображения направленных курсоров в группах ввода Bootstrap 3

Я пытался применить каретки к элементам группы ввода в Bootstrap 3. Пока безуспешно. Пробовал использовать отображение ячейки таблицы для вставленного псевдоэлемента, пробовал абсолютное позиционирование, пытался использовать свойство содержимого для отображения курсора веб-шрифта вместо моего предпочтительного треугольника курсора 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;
    }
  }
}

css twitter-bootstrap twitter-bootstrap-3 pseudo-element
person Karl Offenberger    schedule 27.09.2013    source источник
comment
Я не уверен, что хорошо понимаю ваш вопрос. Это то, что вы ищете: bootply.com/83654   -  person Bass Jobsen    schedule 27.09.2013
comment
Да, это именно то, чего я хочу добиться. Моя проблема заключается в определении набора правил CSS, которые будут последовательно достигать этого эффекта во всех возможных комбинациях содержимого группы ввода. например input-group-addon или input-group-btn, которым предшествует form-control, и наоборот, применяются только к последнему элементу input-group-* и переворачивают курсор в зависимости от направленности, например. form-control идет до или после input-group-*   -  person Karl Offenberger    schedule 27.09.2013
comment
создать новый вопрос для вашей новой проблемы, может быть?   -  person Bass Jobsen    schedule 28.09.2013

Ответы (1)


arrow_upward
5
arrow_downward

Кажется, .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:'';
}
person Bass Jobsen    schedule 27.09.2013
comment
Потрясающий! Ваши селекторы для выравнивания по левому и правому краю input-groups помогли мне выбрать правильный путь. Я обнаружил, что модель border-box в конце концов не особо повлияла на положение каретки. Однако см. http://jsfiddle.net/W8mFS/, который отлично работает во всех версиях, кроме IE10 и ниже. некоторые каретки input-group с выравниванием по левому краю неправильно выровнены по 4px :-( Пытался исправить это с помощью хаков IE (зловещий \9), но не смог сделать это правильно. Есть идеи? - person Karl Offenberger; 28.09.2013
comment
здорово. Вы не обновили свою скрипку? Извините, у меня нет IE, чтобы проверить. Возможно, это то же самое для ширины: shanetomlinson.com/2012/ - person Bass Jobsen; 28.09.2013
comment
Извините, обновил ссылку на скрипку в моем исходном сообщении. Вот текущая скрипка: http://jsfiddle.net/W8mFS/3/. Не знаю, была ли это та же самая проблема, описанная в ссылке вашего комментария, связанной с box-sizing, поскольку я все еще новичок в этих конкретных различиях браузеров, ошибках, обходных путях и хитрых хаках. - person Karl Offenberger; 28.09.2013
comment
Хорошая работа. Я вижу, вы добавляете позицию: asbsolute, которая решает некоторые проблемы (я ожидаю, что доставлю вам больше проблем). Вы добавляете поля и отступы. Я думаю, что это компенсирует некоторую внутреннюю прокладку (так что все еще связано с размером коробки). Оригинальная каретка Bootstrap имеет левое поле 2px, это может помочь решить вашу проблему с IE. - person Bass Jobsen; 28.09.2013
comment
Какие проблемы вы ожидаете от использования position: absolute для псевдоэлемента? Я не возражаю против настройки некоторых отступов и полей, поскольку фактические добавления вставки написаны в LESS, где я подключаю переменные Bootstrap. - person Karl Offenberger; 28.09.2013
comment
я ожидаю, что абсолютная позиция: after/:before будет неожиданной, но это не так, как вы показали - person Bass Jobsen; 28.09.2013