God is good God is good - 1 year ago 60
CSS Question

How can I put a <span> inside of an <input>?

I am trying to make a textbox so that when the user types into it, a "X" shows up on the right. However, I do not want the "X" to show up when there is no text in the box, like it does now.

I tried to make the "X" white, and have it transition it's color when it slides, but you can still select in when you drag the mousedown over it.

I'm thinking that I need to put it inside the textbox (somehow), then slide it to the right and hide it using

overflow: hidden
. I did also try to do this, but I couldn't get anywhere with it.


should be "behind" the white background when it's not showing. Mid transition should look like this:


Is this possible in CSS, and if so, how can I do it?

Answer Source

Wrap both your input and your span inside a container, position this container as relative, and the span as absolute. You can now do whatever you like with the span.

function checkInput(text) {

  if (text) {
  } else {

.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>