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

Question

This question already has an answer here:

• Clear icon inside input text 15 answers

This is not a duplicate. While I was basically looking for the same result as the other post, I wanted to go about it in a different way. They were using background image, and I wanted to use a <span>.

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.

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

The <span> 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 1

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) {
    $("#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>

Answer 2

Hide the X by default and use the show class when needed

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

JS

function checkInput(text) {

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

}

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

Answer 3

Check out this updated fiddle:

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/

By using visibility you get to keep the element in the DOM. This will keep things smooth when it reappears. Notice the use of a "truthy" if statement.