CSS3: ein div auf Textfeld

Question

Ich habe ein Textfeld mit Zeichen begrenzen Box darauf. Was ich will ist. Der Text, der eingegeben werden soll, sollte bis zur Länge des sichtbaren Teils des Textfelds reichen.

Ich habe diesen Code ausprobiert.

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

Wenn ich Eingabe geben Sie dann geht es hinter dem character_limit_div.

Wie kann ich das verhindern?

Jede Hilfe wäre großartig.

Vielen Dank.

Answer 1

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

Ist das die gleiche dass Sie suchen?

Hoffe, das hilft.

Answer 2

können Sie padding-right für die Eingabe, so etwas wie dieses geben:

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