CSS JQuery Eingabetext ohne Eltern div

Question

CSS Eingabetext ohne Eltern div

Hallo Leute, ich diese <div id="input_container"> entfernen müssen kann ich den Code unten, ohne dass um div? und haben das gleiche Ergebnis?

jsfiddle: http://jsfiddle.net/930yrzqa/6/

Das möchte ich nur noch:

<input type="text" class="input-test"> 
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img"> 

#input_container { 
 
    position: relative; 
 
    padding: 0 0 0 20px; 
 
    margin: 0 20px; 
 
    direction: rtl; 
 
    width: 200px; 
 
} 
 

 
#input_img { 
 
    position: absolute; 
 
    bottom: 2px; 
 
    right: 5px; 
 
    width: 24px; 
 
    height: 24px; 
 
} 
 

 
.input-test { 
 
    display: block; 
 
    margin: 0 0 0 auto; 
 
    width: 169px; 
 
    height: 34px; 
 
    box-sizing: border-box; 
 
    border: 2px solid green; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    background-color: white; 
 
    color: $black; 
 
    //background-image: url(http://i.imgur.com/2LGbUV2.png); 
 
    background-position: 130px 5px; 
 
    background-repeat: no-repeat; 
 
    padding: 12px 20px 12px 10px; 
 
    height: 20px; 
 
    margin: 0; 
 
    padding-right: 30px; 
 
    width: 100%; 
 
}

<div id="input_container"> 
 
    <input type="text" class="input-test"> 
 
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img"> 
 
</div>

Answer 1

Sie das Bild in Bezug auf sich selbst positionieren kann - und über das Eingabefeld platzieren:

#input_img { 
    position: relative; 
    left: 190px; 
    bottom: 27px; 
} 

.input-test { 
 
    display: block; 
 
    margin: 0 20px; 
 
    width: 200px; 
 
    height: 34px; 
 
    box-sizing: border-box; 
 
    border: 2px solid green; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    color: black; 
 
    padding: 12px 20px 12px 10px; 
 
    height: 20px; 
 
    padding-right: 30px; 
 
} 
 

 
#input_img { 
 
    width: 24px; 
 
    height: 24px; 
 
    position: relative; 
 
    
 
    /* adjust as you need */ 
 
    left: 190px; 
 
    bottom: 27px; 
 
}

<input type="text" class="input-test"> 
 
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">

Answer 2

Sie mit jquery tun können, die div entfernen und dies tun:

$("input").wrap("<div id='input_container'></div>"); 

jsfiddle: http://jsfiddle.net/930yrzqa/7/

Answer 3

Sie erreichen die gleicher Effekt nur mit dem Eingabeelement. Sie benötigen das Bildelement nicht. :)

#input_container { 
 
    position: relative; 
 
    padding: 0 0 0 20px; 
 
    margin: 0 20px; 
 
    direction: rtl; 
 
    width: 200px; 
 
} 
 

 
#input_img { 
 
    position: absolute; 
 
    bottom: 2px; 
 
    right: 5px; 
 
    width: 24px; 
 
    height: 24px; 
 
} 
 

 
.input-test { 
 
    display: block; 
 
    margin: 0 0 0 auto; 
 
    width: 169px; 
 
    height: 34px; 
 
    box-sizing: border-box; 
 
    border: 2px solid green; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    background-color: white; 
 
    color: black; 
 
    background-repeat: no-repeat; 
 
    padding: 12px 20px 12px 10px; 
 
    margin: 0; 
 
    padding-right: 30px; 
 
    position: relative; 
 
} 
 

 
.input-test{ 
 
    background: url("https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png"); 
 
background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: right; 
 
}

<input type="text" class="input-test">