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.