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.

Lasă un răspuns

Adresa ta de email nu va fi publicată.

Alte articole din aceiasi categorie