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

Question

我还是html的新手。我怎样才能以风格实现这一目标：

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

Answer 1

作为Crossbrowser解决方案实现这一目标的唯一方法是将background-image与background-position和background-size

一起使用

＆＃13;

＆＃13;

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
}

＆＃13;

<input type=text />

＆＃13;

＆＃13;

＆＃13;

在不久的将来，您可以使用:pseudo-element

执行此操作

Answer 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

Answer 3

这是基本想法：

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

对于新手来说，输入中的图像会有点复杂。有几种方法可以做到这一点......我建议在“伪元素”之前使用：您将设置＆lt; input＆gt; （或者你在这里设计的主要元素是什么）让它里面的元素相对于它自己定位，然后你将伪元素设置为绝对定位在左边。然后伪元素获得特定大小，并将图像放入其中。

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

您可能遇到的其他问题：

您可能会丢失左侧的圆角。如果是这样，你可以只对输入上的那些角进行舍入：之前（http://border-radius.com/之类的工具将帮助你只绕过某些角）

如果你使用＆lt; input＆gt;，在某些浏览器中可能会出错。那是因为浏览器为输入提供默认样式。这会变得更加精彩，所以我会提前给你解决方案，你可以研究一下它的作用

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