SEARCH BOX WITHOUT JAVA CODE

Saturday, 2 January 2016

SEARCH BOX WITHOUT JAVA CODE

-------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
<input id='input' name='q' placeholder='Search here...' type='text'/>
YOU CAN'T CHANGE q WORD OR DO'T NOT USE UPPERCASE LETTER Q
BUT WORD PRESS USE SMALL LETTER s
<form id="searchform" method="get" action="http://fbgadgets.blogspot.co.uk/">
<div>
<input name="s" id="s" size="15" type="text">
<input value="Search" type="submit">
</div>

</form>
READ MORE:
https://wordpress.org/support/topic/how-to-customize-search-box-in-sidebar
http://fbgadgets.blogspot.co.uk/2013/08/SEARCHBOXEXCELENCIA.html
-------------------------------------------------------------------------------------------------------------

#Search {
float:right;
background-color:Green;
color:Red;
border-style: solid;
border-color: #0000ff;
transition:background 0.3s ease-in-out 0s;
width:200px;
height:38px;;
}

#input{
float:right;
background-color:Bisque;
border-style: solid;
border-color: #0000ff;
transition:background 0.3s ease-in-out 0s;
width:200px;
height:32px;
}

#toolbar {
background-color:#282828;
font-weight:bold;
height:35px;
margin-bottom:4px;
padding:5px;
}

]]></b:skin>

<div id='toolbar'>
<form action='/search' autocomplete='off' id='searchbox' method='get'>
<input id='Search' type='submit' value='Search'/>
<input id='input' name='q' placeholder='Search here...' type='text'/>
</form>
</div>

-------------------------------------------------------------------------------------------------------------
CODE:2
--------------------------------------------------------------------------------------------------------------

Add-Your-Own-Custom-Search-Gadget-To-Blogger

--------------------------------------------------------------------------------------------------------------

<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEuBBnsLGMVnStf6aHTFuFuHJirV6rkEaDaFTc7O00Wwq6wZBSZUpf7wb1MJjJHR50ad1cjkktKHuA2yaqGVIoCy58SFQ3RFFNnAvFOZS_z87mGB8u51A85ZS7yvfVvT7VRz13cl0_d4k_/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

-------------------------------------------------------------------------------------------------------------
CODE:3
--------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------

<style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEuBBnsLGMVnStf6aHTFuFuHJirV6rkEaDaFTc7O00Wwq6wZBSZUpf7wb1MJjJHR50ad1cjkktKHuA2yaqGVIoCy58SFQ3RFFNnAvFOZS_z87mGB8u51A85ZS7yvfVvT7VRz13cl0_d4k_/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVVT4-QUeZwl8FcEKtBqTzGMJJ5hKEwm4W3ojlCyS15-0tGTwOHbcwEybS-P2I1HHsYs6Fjoq5sNML8EphtUsUgQ5y5gYHHJdneaj_zAVUFNBL_hfhWmf-bIqlacUxzmU2_V0SEm81QLrO/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

-------------------------------------------------------------------------------------------------------------
CODE:4
--------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZoJFlW_cRcVpPvsHCysLlDgL6B8rL2RfjsPFQXCPo5r-L9-rI6aCMAX6PESOg5mRX74HAKTxH4Zn70tO-TF7q38swow3yv7U3v9RDMyM5w1OfZR91U2h7rTshnzW6bh7toKu25U0Iedu3/s1600/searchbar.png) no-repeat;
    width: 208px;
    height: 29px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top;
}
/* 21 X 22*/PNG
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZ79Gh3E6KQ-3UP544XXAmFU-PeMRQpQ9Z1Af8NdPw0q_UGTHFBLZMj9s1XEz8qo1OBBRB_eF6gzVTX7qkJji2Fz2wvnGWMXkuuqPX-JPIjmWDjWmpLF-OwbbR9QNlrlKNQbELGbMWO6u/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-oQ7n5_mBqh8k7sITfF7U0FPiCeRkDUu6o-Mh1tQBgHs0Qk5xnZnZ9zWwzdWkuHEE3XuNxPEAsgx8nU3m2e3z_GnWUbFu4nl7DqkpEYB0QspDGQqsA8v5gKO7AY-p2OUvWiYGyiKkpOfT/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-oQ7n5_mBqh8k7sITfF7U0FPiCeRkDUu6o-Mh1tQBgHs0Qk5xnZnZ9zWwzdWkuHEE3XuNxPEAsgx8nU3m2e3z_GnWUbFu4nl7DqkpEYB0QspDGQqsA8v5gKO7AY-p2OUvWiYGyiKkpOfT/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="search..." />
    <input id="button-submit" type="submit" value="" />
</form>

-------------------------------------------------------------------------------------------------------------
CODE:5
--------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDI0kOHH2pbK7dOhlo4NghYEuaE_CeTdVE4sbm1JCsZln84PpFlZl0HEDqwOzy-r02grGEWUkn7k8QQJeMMVKQ_0IX0Z0qmXlvtVkOoCQ62iyQMHRQUueM2SRXkF0mbnn3JlRmQbJK9kBd/s1600/search-box.png) no-repeat;
    height: 27px;
    width: 202px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    margin: 0px 0px 0px 12px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvijpdCphQ1YpiP73p1u9KfLKnlSqCbvMSvDojhYXQmxgoYSTiylqYb47zvOLNBwEqFL_xyyZ6G89b9u3slcYbz4qJCPACa57X3-piEzsLpUHmSJ8A3N7FqFaL46lG4_HDB0nPNUv1rF-q/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmH3pni6zZnztCr4ZdsxWFZU8FP8spNrGIbALOHeS6b6zClezplyPFlVaPO5StTS_pmQJTS9siMWjOUat58dyfIHuuP7EQICFgyZWb1iHofFkJfWIyNVWaszcGgz1RQlzQeIXqHSbArV53/s1600/search-button-hover.png) no-repeat;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

-------------------------------------------------------------------------------------------------------------
CODE:6
--------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPMr0E74wYfX3wgMxI1-EoHoIPoB8qJBjIPvjUNHQ2voc7c-muPSb3_S1gNJJOPel4svgbH9sWtJGyUXDH0JnbCdOP4fppiq0L4ZtOeBMOMQYKQWp_onfrYLFgnDLGDXrhCFArQPg86T3H/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL_Ual6-s4TN7V89q8SCe1kFHxDEXmx7mTUnn-pXgJE01xRo4JFwPSe7RulEM032vPIu1H3sor09ZLFdUGWJM7WXdt1grZH8QYW95hEi9bOzsazC6w2J323b7HrjuLawZLt7SFPtN2FgoP/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYntsADXlECqXP7BV8T-IWFNgtgCAZpwEkiXkW_V37YK-VpiLZH9rX_uZZI3gisw1SQ-dGYqWxf_gx4x8itPkrYnTNcGOMU3E-UxBvkvw0tZE_ohE5Pm8U4AbmdceyC3gkjlp1OwZVrf6k/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYntsADXlECqXP7BV8T-IWFNgtgCAZpwEkiXkW_V37YK-VpiLZH9rX_uZZI3gisw1SQ-dGYqWxf_gx4x8itPkrYnTNcGOMU3E-UxBvkvw0tZE_ohE5Pm8U4AbmdceyC3gkjlp1OwZVrf6k/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>

-------------------------------------------------------------------------------------------------------------
CODE:7
--------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi3t1PyWxqKPJ9XivU6u5ApC0X8XgMWHZwHAo1rEb_aFmLwK9OfJUmfK_B11BB9dD0QgCQKfNw0DS06tEZ1XbSaVGtJk38Ta09pIrdON3MoHJz2KoScKIxtJmR1VB39Be9hXXqLasNtF0z/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIr1lW9iWK18zMOVL-CsR3JUjzXP4evFws7DZ-xKURhTGFrq7A1dJ__HqVVqQOzcx9yNm_zCUqSSTAY_qPLD1EpEuyAH_n1kDB_-N0H2HBGVQ8PiER24T8_iSoPgpnNEo5rbSj37XhUBMG/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk3XhLCMssZ6_T_hLXCvnQlL1tZ3u5Q1TjEkzuXR7dL2atz6UU25bEDo62kuTxsYzgSqhg2wlBktVlL_u8u56OSuQ2c56DFFbJpcFK4EJ0O2krR9ImSOHo3mJRfaUh8flpPENQHUW2Gem9/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>