CSS3 : a div on text box

Question

I have a textbox with having character limit box on it. What I want is. the text that is to be input should be upto the length of visible part of textbox.

I have tried this code.

 .add_caption_div input[type="text"] { border: thin #dee5e7 solid; width: 190px; border-top-left-radius: 0; border-top-right-radius: 0; display: inline-block; float: left; padding: 7px 12px; } .add_caption_div .image_galley_char_limit_div { display: inline-block; height: 31px; width: 50px; font-size: 9px; color: #999999; position: relative; z-index: 100001; background:#f6f8f8; top:-6px; right:51px; } .add_caption_div .form-control:focus { border: thin #66afe9 solid; } .add_caption_div span { position: relative; top: 10px; } 

 <div class="add_caption_div" > <input type="text" class="form-control" placeholder="Enter Caption"> <div class="image_galley_char_limit_div text-center"> <span> 0/30</span> </div> </div> 

When I type input then it goes behind the character_limit_div.

How can I prevent it?

Any help would be great.

Thank You.

Answer 1

you can give padding-right for input, something like this:

 .add_caption_div input[type="text"] { border: thin #dee5e7 solid; width: 190px; border-top-left-radius: 0; border-top-right-radius: 0; display: inline-block; float: left; padding: 7px 12px; } .add_caption_div .image_galley_char_limit_div { display: inline-block; height: 31px; width: 50px; font-size: 9px; color: #999999; position: relative; z-index: 100001; background:#f6f8f8; top:-6px; right:51px; } .add_caption_div .form-control:focus { border: thin #66afe9 solid; } .add_caption_div span { position: relative; top: 10px; } .form-control{ padding-right: 70px !important; } 

 <div class="add_caption_div" > <input type="text" class="form-control" placeholder="Enter Caption"> <div class="image_galley_char_limit_div text-center"> <span> 0/30</span> </div> </div> 

Answer 2

 .add_caption_div { position: relative; width: 190px; } .add_caption_div input[type="text"] { border: thin #dee5e7 solid; width: 190px; border-top-left-radius: 0; border-top-right-radius: 0; display: inline-block; float: left; padding: 7px 12px; } .add_caption_div .form-control { padding-right: 60px !important; } .add_caption_div .image_galley_char_limit_div { display: inline-block; height: 31px; width: 50px; font-size: 9px; color: #999999; position: absolute; z-index: 100001; top: 1px; right: -73px; background:#f6f8f8; } .add_caption_div .form-control:focus { border: thin #66afe9 solid; } .add_caption_div span { position: relative; top: 10px; } 

 <div class="add_caption_div" > <input type="text" class="form-control" placeholder="Enter Caption"> <div class="image_galley_char_limit_div text-center"> <span> 0/30</span> </div> </div> 

Is this the same that you are looking for?

Hope this helps.