Как я могу положить внутри <input> ?

Это не дубликат. Хотя я в основном искал тот же результат, что и другой пост, я хотел по-другому это сделать. Они использовали фоновое изображение, а я хотел использовать .

Я пытаюсь создать текстовое поле, чтобы, когда пользователь вводит в него, справа появляется "X". Однако я не хочу, чтобы "X" отображалось, когда в поле нет текста, как сейчас.

Я попытался сделать "Х" белым и заставить его менять цвет при скольжении, но вы все равно можете выбрать его, когда перетаскиваете мусс на него.

Я думаю, что мне нужно поместить его в текстовое поле (как-то), затем сдвинуть вправо и скрыть, используя overflow: hidden. Я тоже пытался это сделать, но ничего не смог с этим поделать.

http://jsfiddle.net/qgy8Ly5L/16/

 должен быть "позади" белого фона, когда он не отображается. Средний переход должен выглядеть следующим образом:

_{(источник: googledrive.com)}

Возможно ли это в CSS, и если да, то как я могу это сделать?

Ответ 1

Оберните как ваш вход, так и ваш интервал внутри контейнера, установите этот контейнер как относительный, а диапазон как абсолютный. Теперь вы можете делать все, что захотите, с помощью пролета.

function checkInput(text) {

  if (text) {
    $("#clearBtn1").addClass("show");
  } else {
    $("#clearBtn1").removeClass("show");
  }

}

.text-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.clearBtn {
  position: absolute;
  top: 0;
  right: -15px;
  transition: right 0.2s;
}
.show {
  right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
  <input type="text" onkeyup="checkInput(this.value)" />
  <span id="clearBtn1" class="clearBtn">X</span>
</div>

Ответ 2

Скрыть X по умолчанию и при необходимости использовать класс show

.clearBtn {
    position: relative;
    left: 0;
    transition: left 0.3s;
    display: none;
}
.show {
    display: inline;
}

function checkInput(text) {

    if (text != ""){
        $("#clearBtn1").addClass("show");
    } else {
        $("#clearBtn1").removeClass("show");
    }

}

http://jsfiddle.net/qgy8Ly5L/18/

Ответ 3

Ознакомьтесь с этой обновленной скрипкой:

function checkInput(text) {
    if (text) {
        $("#clearBtn1").addClass("show");
    } else {
        $("#clearBtn1").removeClass("show");
    }
}

.clearBtn {
    position: relative;
    left: 0;
    transition: left 0.3s;
    visibility: hidden;
}

.show {
    left: -18px;
    visibility: visible;
}

http://jsfiddle.net/qgy8Ly5L/19/

Используя visibility вы можете сохранить элемент в DOM. Это будет держать все в порядке, когда оно снова появится. Обратите внимание на использование "правдивого" выражения if.