25.09.2022.
Search form example
This code snippet, when pasted into the sidebar, will display a search form.
The lower part of the code controls the design, put this in the main css file of the template. Live demo in the sidebar.
/// search form
<form method="get" id="searchform" action="<?php bloginfo("url"); ?>/">
<fieldset class="search">
<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"/>
<button>Search</button>
</fieldset>
</form>
/// css example
<style type="text/css">
fieldset.search {
border: none;
max-width: 100%;
margin: 0px 0 40px 0;
}
.search input, .search button {
border: none;
float: left; font-size: 10px;
}
.search input{
color: rgba(0,0,0,0.3);
width: calc(75% – 25px);
padding: 10px 10px;
background-color: rgba(0,0,0,0.1);
margin: 0 5px 0 0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.search input:focus {
background-color: rgba(0,0,0,0.7);
outline: none;
color: #FFFFFF;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.search button{
width: calc(25% – 20px);
padding: 10px;
cursor: pointer;
background-color: rgba(215,124,97,1);
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,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 A9Ky4pZv86gU445CvmTpPVLpDR3U0j3CkeVvHlRqedWLORKOrNkbWqvl1R/zqJbuEY6sIeGR+JSB 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");
background-size: 20px auto;
background-repeat: no-repeat;
background-position: center center;
color: transparent;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.search button:hover {
background-size: 30px auto;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
</style>
