Html 输入左侧和边框带有图标的文本

我还是html的新手。我如何通过以下方式实现这一点：

• 圆形边框1px颜色灰色
• 左侧带有桃色背景的图标
• 在右边输入文本

---

如果您能提供一些代码就更好了，但既然您是初学者，希望这些代码能帮助您

<div id = 'outer'>
    <div id = 'inner'>
        img
    </div>
</div>

---

Cick for fiddle

作为交叉浏览器解决方案，实现这一点的唯一方法是使用

背景图像

和

背景位置

和

背景大小

输入[类型=文本]{
背景图片：url(http://i.imgur.com/EitD5gR.png);
背景尺寸：16px 16px；
背景重复：无重复；
背景位置：左上；
边界半径：6px；/*圆形边界*/
边框：1px纯灰；
左侧填充：16px
}

以下是基本思路：

使用CSS属性

border radius

得到的圆形边框。您需要查找此项，因为并非所有浏览器都支持纯ol'

边框半径

——您将得到几个css规则（例如，

边框半径：…；-webkit边框半径：…

）。使用css属性

border color

获得的边框颜色。（以及左侧边栏中的链接）是了解边框样式的好资源

对于新手来说，输入中的图像会有点复杂。有几种方法可以做到这一点……我建议在“pseudoelement”之前使用：设置（或者不管您在这里设置的主要元素是什么），让其中的元素相对于它定位自己，然后将pseudoelement设置为完全位于左侧。然后，伪元素获得一个特定的大小，然后将图像放入其中

如果不为您做太多的工作，CSS将类似于

input {
    border-radius: ...;
    border-color: ...;
    position: relative; <-- lets us position child elements relative to this one
}
input:before {
    content: url(path/to/the/image);
    position: absolute;
    left: 0;
    width: 30px; <-- I'm just guestimating that number
    height: 100%; <--- depending on the rest of your css, this might need to be set in pixels
}

---

作为一个菜鸟，并不能免除你解释和展示你自己的尝试，以及解释他们哪里出了问题。请向我们展示您的代码（即使它不起作用），并解释错误所在。是的，使用输入字段相对位置或边距操作。这是迄今为止最接近的解决方案。谢谢Anjula

input {
    border-radius: ...;
    border-color: ...;
    position: relative; <-- lets us position child elements relative to this one
}
input:before {
    content: url(path/to/the/image);
    position: absolute;
    left: 0;
    width: 30px; <-- I'm just guestimating that number
    height: 100%; <--- depending on the rest of your css, this might need to be set in pixels
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    border-repeat: repeat;
}