Form role search.

Sau mai bine zis cum sa i-ti faci o casuta de cautare mai altfel. Am testat la tema asta acest nou design pentru casuta de cauare si cred ca a iesit ok. Puteti sa incercati si voi.

Pentru partea care se pune in header.php avem acest cod.

[codesyntax lang=”html4strict” lines=”normal” container=”div”]

<div id="search-box">
   <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text">Search for:</span>
		<input type="search" class="search-field" placeholder="Cauta..." value="" name="s" title="Search for:" />
	</label>
	<input type="submit" class="search-submit" value="Search" />
</form>
</div>

[/codesyntax]

Pentru partea de css avem acest cod:

[codesyntax lang=”css” container=”div”]

#search-box {
height: 35px;
margin: 0 5px 0 0;
float: right;
width: 20%;
}

.search-form {
	position: absolute;
        right: 28px; 

}

.search-field {
	background-color: transparent;
	background-image: url(images/search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 0;
}

.search-field:focus {
	background-color: #fff;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 230px;
}
.search-form
.search-submit { 
display:none;
}

[/codesyntax]

Nu uitati sa incarcati in folderul images din tema o poza icnita de cautare 35×35 care apare la casuta de cautare. Vezi demo.

Demo puteti vedea la aceasta tema meniul de sus partea dreapta.

Faci un comentariu sau dai un răspuns?

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Alte articole din aceiasi categorie

Salut și bine ai venit pe acest blog!

Eu sunt Bucur si acesta este blogul meu in care vei gasi articole in majoritatea lor despre Programare web Front-end si un pic de back-end.

Iată cum mă poți contacta:

Ai o intrebare? nu ezita sa ma contactezi.

Vei primi un raspuns in cel mai scurt timp posibil.

    Numele tau (necesar)

    Email (necesar)

    Subiect

    Mesaj

    Prin utilizarea acestui formular sunteți de acord cu stocarea și manipularea datelor dvs. pe acest site web.

    Daca vrei Front-end in general recomand:
    https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/
    https://www.udemy.com/course/advanced-javascript-concepts/
    https://www.udemy.com/course/complete-react-developer-zero-to-mastery/
    Daca vrei doar Javascript recomand:
    https://www.udemy.com/course/the-complete-javascript-course/
    https://www.udemy.com/course/advanced-javascript-concepts/