thêm biểu tượng tìm kiếm vào ô nhập

Question

<div id="inputs"> 
<input type="text" value=""> 
<input type="text" value=""> 
</div> 
<input type="button" id="add" value="Add input"> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('#add').click(function(){ 
$('#inputs').append('<input type="text" value="">'); 
}); 
}); 
</script> 

Biểu tượng tìm kiếm cho mỗi đầu vào mới được tạo bằng nút (id = add; không hiển thị ở đây để đơn giản). Đây sẽ là đầu vào điển hình:

<label> 
<input type="text" class="search" name="word" autofocus="autofocus" /> 
<span class="search-icon"> 
    <span class="glass"></span> 
    <span class="handle"></span> 
</span> 
</label> 

Với CSS tôi có thể định vị biểu tượng tìm kiếm theo cách cố định.

Cảm ơn

Answer 1

Dưới đây là các mã CSS mà tôi muốn sử dụng:

<style> 
#add{ 
padding:17px;padding-left:55px;width:300px;border:1px solid #f5f5f5; 
font-size:13px;color:gray; 
background-image:url('http://i47.tinypic.com/r02vbq.png'); 
background-repeat:no-repeat; 
background-position:left center;outline:0; 
} 
</style> 

Lưu ý: tôi đã thêm rất nhiều mã thêm để làm cho hộp tìm kiếm trông đẹp hơn, mã cần thiết để làm cho việc tìm kiếm hộp apear là padding-left, background-image: url, background-repeat và background-position. Thay thế "http://i47.tinypic.com/r02vbq.png" bằng bất kỳ biểu tượng tìm kiếm nào bạn muốn.

Nó cũng quan trọng để biết rằng bây giờ trong HTML5, hầu hết các trình duyệt hiển

<input type="search" results> 

với một biểu tượng tìm kiếm. Tìm kiếm loại đầu vào biến nó thành một hộp tìm kiếm, với nút "x" để xóa và thêm "kết quả" cũng sẽ hiển thị hộp tìm kiếm. Tất nhiên bạn cũng có thể thêm một nút x với CSS và JavaScript vào một hộp tìm kiếm thông thường. Điều quan trọng cần lưu ý là tìm kiếm loại đầu vào cho phép tạo kiểu rất ít. Demo trên Safari trên máy Mac:

Nói cho tôi biết nếu điều này giúp bạn, và chắc chắn để đánh dấu là câu trả lời. :)

Answer 2

Đặt hình ảnh vào nhịp, ví dụ sử dụng background-image, sau đó cung cấp cho nó một vị trí tương đối và di chuyển nó sang bên trái để nó chồng lên cuối bên phải của hộp tìm kiếm, ví dụ:

#g-search-button { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    position: relative; 
    left: -22px; 
    top: 3px; 

    background-color: black; /* Replace with your own image */ 
} 

Working example on JSBin

Lưu ý: đây không phải là câu trả lời của tôi, tôi đã tìm thấy nó here

Answer 3

có một từng bước trên kirupa.com đây: http://www.kirupa.com/html5/creating_an_awesome_search_box.htm

Với chút liên quan của CSS cho bạn đây:

input[type=text] { 
    width: 260px; 
    padding: 5px; 
    padding-right: 40px; 
    outline: none; 
    border: 2px solid #999999; 
    border-radius: 5px; 
    background-color: #FBFBFB; 
    font-family: Cambria, Cochin, Georgia, serif; 
    font-size: 16px; 
    background-position: 270px -10px; 
    background-image: url('http://www.kirupa.com/images/search.png'); 
    background-repeat: no-repeat; 
}