jquery - 没有父 div 的 CSS Jquery 输入文本

Question

没有父 div 的 CSS 输入文本

大家好，我需要删除这个 <div id="input_container">我可以在没有那个 div 的情况下使用下面的代码吗？并有相同的结果？

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

我想要这个:

<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

您可以相对于自身定位图像 - 并将其放在输入框上:

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