dodanie ikony wyszukiwania do pola wprowadzania danych

<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>

W powyższym kodzie, chcę dodać ikonę wyszukiwania dla każdego nowego wejścia wygenerowanego za pomocą przycisku (id = dodaj, nie pokazane tutaj dla uproszczenia). Będzie to typowy sygnał wejściowy:dodanie ikony wyszukiwania do pola wprowadzania danych

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

Dzięki CSS mogę ustawić ikony wyszukiwania w ustalony sposób.

Dzięki

Źródło

2012-12-24 j1nma

Oto kod CSS że użyję:

<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>

Uwaga: Dodałem wiele dodatkowych kodów, aby pole wyszukiwania wyglądają lepiej, niezbędny kod, aby wyszukać box apear to padding-left, background-image: url, background-repeat i background-position. Zastąp "http://i47.tinypic.com/r02vbq.png" dowolną wybraną ikoną wyszukiwania.

Ważne jest również, aby wiedzieć, że teraz w HTML5, większość przeglądarek renderowanie

<input type="search" results>

ikoną wyszukiwania. Wyszukiwanie typu wejściowego powoduje, że jest to pole wyszukiwania z przyciskiem "x" do wyczyszczenia, a dodanie "wyników" wyświetla również pole wyszukiwania. Oczywiście możesz również dodać przycisk x z CSS i JavaScript do zwykłego pola wyszukiwania. Ważne jest również, aby pamiętać, że wyszukiwanie typu wejścia pozwala na bardzo mało stylizacji. Demo na Safari na Macu:

Demo

Powiedz mi, czy to pomaga, i upewnij się, aby oznaczyć jako odpowiedź. :)

Źródło

2012-12-24 05:48:57

AMAZING wyjaśnienie, bez wątpienia to będzie działać, ale nie wiesz, czy mogę, powiedzmy, sprawiają, że pole wyszukiwania przezroczysty, lub zmienić kolor ikona wyszukiwania? – j1nma

Ah dobrze podane przeze mnie kody zatrzymują ikonę wyszukiwania w polu wyszukiwania, więc sprawienie, że pole wyszukiwania będzie przezroczyste sprawia, że ikona staje się przezroczysta. Można oczywiście użyć względnego pozycjonowania, które umożliwiłoby niezależność ikony wyszukiwania i pola wyszukiwania. Możesz edytować ikonę wyszukiwania, aby zmienić kolor (nie można tego zrobić w CSS), lub zmienić jej krycie w programie do fotoedycji, lub w tym przypadku od zera, ale trochę przypomina moją ikonę wyszukiwania. :) Oto przykład względnego pozycjonowania: http://jsfiddle.net/525h6/. Możesz to również osiągnąć przy użyciu margingu, ale to wystarczy –

Jeśli chodzi o kod w mojej odpowiedzi, "outline: 0", wtedy nie miałem pojęcia i myślę, że lepiej przeczytaj http://outlinenone.com/. –

umieścić obraz w przedziale, na przykład za pomocą background-image, a następnie nadać mu względną pozycję i przesunąć go w lewo tak, że zachodzi na prawy koniec polu wyszukiwania, na przykład:

#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

Uwaga: to nie jest odpowiedź na moje pytanie, znalazłem to here

Źródło

2012-12-24 05:55:23

jest to krok po kroku na kirupa.com tutaj: http://www.kirupa.com/html5/creating_an_awesome_search_box.htm

z odpowiednimi trochę CSS dla was:

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; 
}

Źródło

2013-05-26 04:54:22 morefromalan

dodanie ikony wyszukiwania do pola wprowadzania danych

Odpowiedz

Powiązane problemy