How can I get a div just inside an input at 0% and 100%?


Tags: javascript,css

Problem :

How can I get the @ symbol to be just inside the input at both 100% and 0%? https://jsfiddle.net/v6mcghdd/

HTML:

<div id="testContainer">
<div id="test2">@</div>
<input id="test3" />
</div>

CSS:

#testContainer{
  display: inline-block;
  position: relative;
}
#test2{
  position: absolute;
  left: 100%;
  z-index:1;
  width: 0px;
}
#test3{
  width: 500px;
}


Solution :

Assuming you know the width of the '@' character this can be done with calc() together with translateX.

Assuming the '@' char is 15px wide:

1) Set it with a width of 100% of the container minus its own width (15px) width: calc(100% - 15px);

2) Now translateX will operate on it the way we want it to where at translateX(0%) the '@' is at the beginning of the input and at translateX(100%) the '@' is at the end.

3) Make sure to set overflow:hidden on the container

In the demo below - hover over the input:

#testContainer {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
#testContainer:hover:after {
  transform: translateX(100%);
}
#testContainer:after {
  content: '@';
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 15px);
  transform: translateX(0%);
  z-index: 1;
  transition: transform .4s;
}
#test3 {
  width: 500px;
}
<div id="testContainer">
  <input id="test3" />
</div>

Here's another example demo using the same principle:


    CSS Howto..

    Basic Accordion pull down using java script and css not working. How can I get it to not have a symbol beside it?

    How to assign CSS to mobile page in asp.net

    How can I find out what CSS is needed to implement twitter Bootstraps Modal. [closed]

    How to dynamically import javascript and css files

    how to manage Css Floats

    How to position bottom of div above top of its container

    JavaFX editable tableview: How to change size and css of the TextField inside of TableCell?

    How do I fit custom size icons into jQuery UI buttons?

    How to add a class to a bar using jQuery?

    How make something like Facebook Notifications?

    how to zoom in an image and center it

    How to have different lightbox for different object

    How can I display an alert with the position of the element that was clicked?

    How to do page load in jQuery?

    How to use the word-wrap property in CSS 2.1 and validate CSS

    how can i add style with CSS to