Bild vertikal in Responsive Textbox ausrichten

Question

Ich habe eine reaktionsfähige Textbox mit einer Beschriftung, die auf einen Fokus hochschaltet und wenn Textfeld eingegeben hat. Ich versuche, ein Bild auf der rechten Seite des Textfelds einzufügen, das in der Mitte mit der Textfeldeingabe ausgerichtet ist. Aber das Bild ist nach unten verschoben.

HTML:

<div style="margin-top: 20px"> 
    <input class="responsiveTextBox" type="text" id="clientName" required="required" /> 
    <img src="https://s31.postimg.org/6bym9bjnf/reset.png" class="resetImage"> 
    <label class="responsiveLabel" id="lblClientName" for="clientName">Client Name</label> 
    <div class="bar"></div> 
</div> 

CSS:

.responsiveTextBox{ 
    outline: none; 
    z-index: 1; 
    position: relative; 
    background: none; 
    width: 100%; 
    height: 60px; 
    border: 0; 
    color: black; 
    font-size: 16px; 
    font-weight: 400; 
} 

.responsiveLabel { 
    position: absolute; 
    top: 0; 
    left: 0; 
    color: #757575; 
    font-size: 20px; 
    font-weight: 300; 
    line-height: 60px; 
    -webkit-transition: 0.2s ease; 
    transition: 0.2s ease; 
} 

.responsiveTextBox:focus ~ label { 
    color: #9d9d9d; 
-webkit-transform: translate(-12%, -50%) scale(0.75); 
    transform: translate(-12%, -50%) scale(0.75); 
} 

.responsiveTextBox.hasValue ~ label { 
    color: #9d9d9d; 
-webkit-transform: translate(-12%, -50%) scale(0.75); 
    transform: translate(-12%, -50%) scale(0.75); 
} 

.responsiveTextBox:valid ~label { 
    color: #9d9d9d; 
    -webkit-transform: translate(-12%, -50%) scale(0.75); 
    transform: translate(-12%, -50%) scale(0.75); 
} 

.bar{ 
    position: absolute; 
    left: 0; 
    /*bottom: 0;*/ 
    background: #757575; 
    width: 100%; 
    height: 1px; 
    } 

.resetImage{ 
    float: right; 
    vertical-align: middle; 
} 

JSFIDDLE

Jeder Vorschlag, wie dieses Problem zu lösen?

Answer 1

Ihre Eingangsbreite beträgt 100%, müssen Sie es reduzieren und die Eigenschaft float aus dem img für vertical-align entfernen: Mitte zu Werken

.responsiveTextBox{ 
    width: 95%; 
} 
.resetImage { 
    vertical-align: middle; 
} 

Fiddle