How can I put a inside of an ? [duplicate]

Tags: css,input,hide,css-transitions

Problem :

This question already has an answer here:

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.

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?

Solution :

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=""></script>
<div class="text-container">
  <input type="text" onkeyup="checkInput(this.value)" />
  <span id="clearBtn1" class="clearBtn">X</span>

    CSS Howto..

    How to hold a css style on hover

    CSS parallax effect. How to change the top margin

    How to add text under every image?

    How to clear the parent css

    How to Inherit grandparent CSS not parent?

    HTML: How to add an image using CSS as linked style sheet

    How to add css class?

    How can I add specific css id to parent menu with php or javascript

    How can I make a photo which fit the div shape using css

    How much client-side programming is needed when doing server-side programming?

    How to check if CSS is on an element? [closed]

    LESS: how to use dumpLineNumbers

    Portfolio Page — How to move down to the next row

    How to develop a webpage with Bootstrap [closed]

    How can I find the CSS3 rotation of an element?

    How to create circle image and text Which are complementary to each other in bootstrap or pure css?

    How do I format an angular drop down menu?

    How to style a SVG using CSS in javaFX FXML

    How to change .css priority with javascript

    same button for show/hide in jquery

    How to center in CSS only after specific HTML element?

    How to import packages within my Aurelia application

    How Do I Code a Popover in Rails 4.2.5 Using gem bootstrap-sass (Bootstrap 2)?

    how to use
    for navigation purpose

    how to crop big image in bootstrap carousel

    How to create popups in css /Javascript?

    (CSS) How to position the Div near to the bottom right corner of the browser Relatively to the Browser Size? [closed]

    How to make the menu contents center aligned?

    How do I fix this alignment issue in jQuery & CSS?

    How do I add a transition to this rollover?