输入带有左侧和边框图标的文本[关闭]答案

【问题标题】：input text with icon on the left and border [closed]输入带有左侧和边框图标的文本[关闭]
【发布时间】：2015-03-15 16:42:45
【问题描述】：

我还是 html 的新手。我怎样才能通过风格实现这一点：

圆角边框 1px 颜色灰色
左侧带有桃色背景的图标
右侧输入文字

【问题讨论】：

作为一个新手并不能免除你解释和展示你自己的尝试，并解释他们哪里出了问题。请向我们展示您的代码（即使它不起作用）并说明哪里出了问题。

标签： html css input

【解决方案1】：

作为跨浏览器解决方案实现这一目标的唯一方法是将background-image 与background-position 和background-size 一起使用

input[type=text]{
  background-image: url(http://i.imgur.com/EitD5gR.png);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: left top;
  border-radius: 6px;/*rounded border */
  border: 1px solid grey;
  padding-left: 16px
}

&lt;input type=text /&gt;

在不久的将来，您将能够使用 :pseudo-element 做到这一点

【讨论】：

是的，并且带有输入字段的相对位置或边距操作。

【解决方案2】：

如果你能提供一些代码就更好了，但由于你是初学者，希望这些代码对你有所帮助

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

CSS

#outer{
    width:200px;
    height:50px;
    border: 2px solid gray;
    position:absolute;
    border-radius:10px;
}
#inner{
    position:relative;
    width: 20%;
    height:100%;
    background-color: yellow;
    border-radius:2px;
    z-index:-30;
}

拉小提琴Fiddle

【讨论】：

这是迄今为止最接近的解决方案。谢谢安朱拉

【解决方案3】：

这是基本的想法：

您将使用 CSS 属性 border-radius 获得圆形边框。您需要查看此内容，因为并非所有浏览器都尊重普通的 border-radius - 您最终会得到几个 css 规则（例如 border-radius:...; -webkit-border-radius:...）。您将使用 css 属性 border-color 获得的边框颜色。 http://www.w3schools.com/cssref/pr_border.asp（以及左侧边栏中的链接）是学习边框样式的好资源

输入中的图像对于新手来说会有点复杂。有几种方法可以做到这一点……我建议在“伪元素”之前使用 :before。您将设置（或您在此处设置样式的任何主要元素）以让其中的元素相对于它定位自己，然后将伪元素设置为绝对定位在左侧.然后伪元素得到一个特定的大小，然后你将图像放入其中。

不用为你做太多的工作，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
}

您可能遇到的其他问题：

您可能会丢失左侧的圆角。如果是这样，您可以只圆输入上的那些角：before（像http://border-radius.com/ 这样的工具将帮助您只圆某些角）

如果您使用的是，它在某些浏览器中可能看起来不正确。这是因为浏览器为输入提供默认样式。这涉及到更花哨的东西，所以我会预先给你解决方案，你可以研究一下它的作用

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

【讨论】：