如何插入输入标签

Question

我只是想显示输入标签内的形象像极了真棒网站做

在这方面，我想里面插入图像内的图像注册号码和密码前的文本框..我该怎么做？

Answer 1

这里的文本框的HTML：

<input type="text" name="whatever" id="funkystyling" /> 

这里的左侧图像的CSS：

#funkystyling { 

    background: white url(/path/to/icon.png) left no-repeat; 
    padding-left: 17px; 
} 

下面是在右边的图像CSS：

#funkystyling { 
    background: white url(/path/to/icon.png) right no-repeat; 
    padding-right: 17px; 
} 

Answer 2

第一个选项是设置输入框的背景图像，但问题是您必须针对不同的输入尺寸处理它。 另一种选择是在输入框之前/之后设置伪元素，并在伪元素的内容中指定图像url。

在我看来，第二个选项对于您的要求更稳定。

Answer 3

我相信你正试图让你的图标在你面前输入元素。您可以通过相应地在您的输入和样式的前面添加<i>标记来使用它。

HTML

<div class="inner-addon left-addon"> 
    <i class="glyphicon glyphicons-lock"></i> 
    <input type="text" class="form-control" /> 
</div> 

CSS

/* enable absolute positioning */ 

.inner-addon { 
    position: relative; 
    margin: 10px; 
} 

/* style icon */ 
.inner-addon .glyphicon { 
    position: absolute; 
    padding: 10px; 
    pointer-events: none; 
} 

/* align icon */ 
.left-addon .glyphicon { left: 0px;} 
.right-addon .glyphicon { right: 0px;} 

/* add padding */ 
.left-addon input { padding-left: 30px; } 
.right-addon input { padding-right: 30px; } 

下面是一个工作jsfiddle

Answer 4

我认为这条线可以解决您的问题。因此，创建一个div看起来像一个文本框和隐藏真正的文本框的边框

HTML

<div id="funkystyling"> 
<div></div> 
<input type="text" name="whatever"> 
</div> 

CSS

#funkystyling { 
border:solid; 
width: 300px 
} 

#funkystyling div{ 
border: solid 2px; 
width: 20%; 
height: 20px; 
background: white url(/path/to/icon.png) left no-repeat; 
float: left 
} 

#funkystyling-child input{ 
float: left; 
width: 80%; 
border: none 
}