Dostosowanie wyszukiwarki Ceneo

Dla specjalistów Webmastering
#1

Witam Was

Czy mógłbym prosić kogoś o pomoc w dostosowaniu wyszukiwarki ceneo ?

Mam kod:

    <form action="" method="get" name="form-head-search" id="ceneoap-form-head-search" onsubmit="(function(form){var t = document.getElementById('ceneoap-search-query'); form.setAttribute('action', 'https://www.ceneo.pl/;szukaj-' + t.value.replace(' ', '+') + '#pid=14665&crid=138522'); form.target='_blank'; })(this);">

        <input type="text" value="Wyszukaj na Ceneo.pl" id="ceneoap-search-query" name="" />
    <button type="submit" title="Szukaj na Ceneo.pl">Znajdź</button>
    </form>
</div>

i nie potrafię zrobić by:

  1. Pole do wyszukiwania miało max 400px i miało padding 5.
    2.Przycisk wyszukiwania był obok pola wyszukiwania i był czerwony, z białym napisem i także padding 5.

Od razu powiem, ze chciałem to zrobić w pliku css. Niestety mimo prób NIE udawało się :frowning:

#2

A obecny CSS nadpisuje tobie formatowanie? https://stackoverflow.com/questions/10615872/bootstrap-align-input-with-button

PS. Widzę że źle się sformatował wklejony kod (wyciągam opcją cytowania całość):

<div class="ceneo-searchbox">
	<form action="" method="get" name="form-head-search" id="ceneoap-form-head-search" onsubmit="(function(form){var t = document.getElementById('ceneoap-search-query'); form.setAttribute('action', 'https://www.ceneo.pl/;szukaj-' + t.value.replace(' ', '+') + '#pid=14665&crid=138522'); form.target='_blank'; })(this);">
		<input type="text" value="Wyszukaj na Ceneo.pl" id="ceneoap-search-query" name="" />
		<button type="submit" title="Szukaj na Ceneo.pl">Znajdź</button>
	</form>
</div>

Jakby ktoś chciał prawie pełny (wyglądał jakby div był jeden wycięty).


#ceneoap-search-query {
    max-width: 400px;
    min-width: 400px;
    padding: 5px;
    font-size: 10pt;
}
.ceneo-searchbox button {
    background-color: #ed1010;
    border: none;
    color: white;
    padding: 6px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 2px;
    cursor: pointer;
}

Na pewno przy ekranie o mniejszej szerokości niż ~540 px, przycisk spadnie do nowej linii - tu więc bym może polecał media queries:

http://webkod.pl/kurs-css/lekcje/dzial-1/css3-media-queries

By na przykład pole wyszukiwania zmniejszyć do 300 px.

Na podglądzie dodałem 4 zmniejszenia pola wyszukiwania i przy małej szerokości “szukaj” zmienia się w :mag:.
Pewnie da się to ogarnąć trochę lepiej.

1 polubienie
#3

Super dziękuje, a mógłbyś jeszcze napisać jak zrobić by wpisywany tekst był innego koloru niż ten który się obecnie wyświetla “Wyszukaj na Ceneo.pl” ?

1 polubienie
#4

Tak możesz zmienić kolor w polu pisania (również tekstu “szukaj na ceneo” w obecnym momencie):

#ceneoap-search-query {color:red;}

A jak przeniesiesz tekst z value do placeholder to możesz sprawdzić (tak by nie różnił się od zmienionego koloru, dwa różne będą razić po oczach):

#ceneoap-search-query::-webkit-input-placeholder {color:red; opacity:.5}         /* Chrome 4+, Opera 15+ inne Blink / WebKit (np. Safari) */
         #ceneoap-search-query::-moz-placeholder {color:red; opacity:.5}         /* Firefox 19+ i inne Gecko / Goanna */
     #ceneoap-search-query:-ms-input-placeholder {color:red; opacity:.5}         /* Internet Explorer 10+ */

Opacity rozjaśni kolor tekstu “Szukaj na Ceno” jak będzie przeniesione do atrybutu placeholder, a kolor red zmień na kolor co będzie dobrze widoczny na tle pola wyszukiwania.