2022..0925.

Keresési űrlap példa

Ezt a kódrészlet az oldalsávba beillesztve megjelenítheted a kereső űrlapot.

A kód alsó része a dizájnt határozza meg, ezt a sablon fő css fájljába tedd be. Élő demó az oldalsávban.

/// search form<br />
<form method="get"
id="searchform" action="<?php bloginfo("url");
?>/"><br />
<fieldset class="search"><br
/>
<input value="search here"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;"
id="s" name="s" type="text"/><br
/>
<button>Search</button><br />
</fieldset><br
/>
</form><br />
/// css example<br />
<style
type="text/css"><br />
fieldset.search {<br />
border:
none;<br />
max-width: 100%;<br />
margin: 0px 0 40px 0;<br
/>
}<br />
.search input, .search button {<br />
border:
none;<br />
float: left;	font-size: 10px;<br />
}<br
/>
.search input{<br />
color: rgba(0,0,0,0.3);<br />
width:
calc(75% – 25px);<br />
padding: 10px 10px;<br
/>
background-color: rgba(0,0,0,0.1);<br />
margin: 0 5px 0 0;<br
/>
-webkit-transition: all 400ms ease-in-out;<br />
-moz-transition:
all 400ms ease-in-out;<br />
transition: all 400ms ease-in-out; <br
/>
}<br />
.search input:focus {<br />
background-color:
rgba(0,0,0,0.7);<br />
outline: none;<br />
color: #FFFFFF;<br
/>
-webkit-transition: all 400ms ease-in-out;<br />
-moz-transition:
all 400ms ease-in-out;<br />
transition: all 400ms ease-in-out; <br
/>
}<br />
.search button{<br />
width: calc(25% – 20px);<br
/>
padding: 10px;<br />
cursor: pointer;<br />
background-color:
rgba(215,124,97,1);<br />
background-image:
url("data:image/svg+xml;charset=utf8,%3C?xml version=’1.0′
encoding=’UTF-8′ standalone=’no’?%3E%3C!DOCTYPE svg PUBLIC
‘-//W3C//DTD SVG 1.1//EN’
‘http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd’%3E%3Csvg
version=’1.1′ id=’Layer_1′ xmlns=’http://www.w3.org/2000/svg’
xmlns:xlink=’http://www.w3.org/1999/xlink’ x=’0px’ y=’0px’
width=’150px’ height=’150px’ viewBox=’0 0 150 150′
enable-background=’new 0 0 150 150′ xml:space=’preserve’%3E%3Cimage
id=’image0′ width=’150′ height=’150′ x=’0′ y=’0′
href=’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAQAAACWCLlpAAAABG
dBTUEAALGPC/xhBQAAACBjSFJN
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
tTaTUroncGT5s/VFqf/feEN36yxZWnMtG2/oqJLmGbyS5R9Z2sRFQ6INdN97hTQ/wGs6+LN2q6Br
GwgfxFP8AzxZoaxthVvbm0C5es001sWcQwvN4/VZZw23eSZZuS34PhD+TXBqavBOggGhyQw5mJbr
4AT+LLTtLTR1n3GFFv/W8GbeWWBSPWYVWH35ssKLjpwbE0tXjKoxl6q0NaUxy2/5lbGIqIBZy1Wa
rPB7a8+GEXcVtUDSuSmfqtSl3bFbBiir4CkLu51zrs+3Fj7t9pgljAe6qApZuC15M/qYS1dqBDGv
+dPH2ni+kI3rmMcbTHl256fvCuuJ25OAVwyYTrpMJUrUiaP3OzT6/cN0WQUG1hY4edS3A6dPWMxo
A0M2uXgUX555hsyG8iqi/5aHJ81l3lK77y9H1wtqrRUXUvOGI+oLqYx3GLRWAcpNso6o8ZrHR4A7
jDpzjJIz0iOqk23iS6J0sojs9P2MGt/z+Ahwq3JUhkJLN7YTTGujc+guq7vz2bUROpfNuf1RY3Hb
NJV16fWkZA6y+32IHVeXYDdbT9ZBGP9Au/NzIBbXpStrf9Xk0YTpkwEdri6hyZM8h7oCQIUGNSpv
O3+HEQN6z5Qpt9suctBPPlm/H3d/YPB7prcr5n6urk3qqER+WenwB4USB3HWtFr5wIwKT6w7Uxuq
GV7wOlfcRNlHusv+Gl6NrqUfOO0KnQLwua6Ck94aX/CncM8bZG16X+ML/pQO/7AGHe84r/q1ywJ6
5hhtQ79l7dVwT4WO0fK6Id9wFbJ4DVWyrPVXwz0zamZDlcC1lKw9tBOe/7cla0+L++i/ZUytXJcs
SlNiS4/82mTtmxLh+csnzpqb63pnHQh9G5krIq6vZAGhb+MLe6Bm8c5w7m52wvTFdVbDAzX6szH/
pDU211kNDwwo8eP4un/GfdqB+9ddsoS57pIljMkiYLIImCwCJouAySJgsgiYLAImi4DJImCyCJgs
AiaLgMkiYLIImCwCJouAySJgsgiYLAImi4DJImCyCJgsAiaLgMki8B+Ahiop7kx+9wAAABZ0RVh0
Q3JlYXRpb24gVGltZQAwNy8xNi8xNaoAakwAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDctMjBU
MjM6MjI6NTcrMDA6MDAxtEWLAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA3LTIwVDIzOjIyOjU3
KzAwOjAwQOn9NwAAABN0RVh0ZGM6Zm9ybWF0AGltYWdlL3BuZ/+5Gz4AAAAcdEVYdFNvZnR3YXJl
AEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAI3RFWHR4bXA6Q3JlYXRlRGF0ZQAyMDE1LTA3LTE1
VDIzOjI5OjE3WnVH/BcAAAAtdEVYdHhtcDpDcmVhdG9yVG9vbABBZG9iZSBGaXJld29ya3MgQ1M2
IChXaW5kb3dzKShj88kAAAAjdEVYdHhtcDpNb2RpZnlEYXRlADIwMjEtMDItMjRUMDE6MjI6MDFa
ftyD+AAAAABJRU5ErkJggg==’/%3E%3C/svg%3E");<br />
background-size:
20px auto;<br />
background-repeat: no-repeat;<br
/>
background-position: center center;<br />
color: transparent;<br
/>
-webkit-transition: all 400ms ease-in-out;<br />
-moz-transition:
all 400ms ease-in-out;<br />
transition: all 400ms ease-in-out; <br
/>
}<br />
.search button:hover {<br />
background-size: 30px
auto;<br />
-webkit-transition: all 400ms ease-in-out;<br
/>
-moz-transition: all 400ms ease-in-out;<br />
transition: all 400ms
ease-in-out; <br />
}<br />
</style><br />