2

::after не работает.

input {
  height: 50px;
  display: block;
}

input:after {
  position: absolute;
  right: 0;
  width: 27px;
  height: 21px;
  background: red;
  content: '';
  display: block;
}
<input type="text">

https://jsfiddle.net/1ygc5Lkb/

1
  • Replaced elements. Некоторое время назад в хроме работали псевдоэлементы с инпутами, потом выпилили.
    – Qwertiy
    28 апр 2017 в 15:30

2 ответа 2

3

Псевдо-элементы :after и :before могут быть применимы только для элементов-контейнеров, потому что они рендерятся как дочерние элементы. input элемент не является элементом-контейнером.

0

Необходимо создать контейнер для input, и к этому контейнеру применять псевдо-элементы

Пример

.input-container {
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.input-container:after {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -10.5px;
    width: 27px;
    height: 21px;
    background: red;
    content: '';
    display: block;
    pointer-events: none;
}
input {
    height: 50px;
    display: block;
}
<div class="input-container">
    <input type="text">
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.