如何插入輸入標籤

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 
}