texte d'entrée CSS Jquery sans parent div

Question

texte d'entrée CSS sans parent div

Salut les gars, je dois supprimer ce <div id="input_container"> je peux avoir le code ci-dessous sans que div autour? et ont le même résultat?

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

Je voudrais avoir juste ceci:

<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

Vous pouvez positionner l'image par rapport à lui-même - et placez-le sur la zone de saisie:

#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

vous pouvez faire avec jquery, enlever la div et faire:

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

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

Answer 3

Vous pouvez obtenir le même effet avec seulement l'élément d'entrée. Vous n'avez pas besoin de l'élément d'image. :)

#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">