Caixa de Pesquisa Com Efeito Transparente (MODELO 2)

Modelo 2:

/*****************************CAIXA DE PESQUISA****************************/

<style>

#searchb {

float: left;

margin: 30px 0

}

#searchb input[type="text"], #searchb textarea {

background: none repeat scroll 0 0 #FFFAFA; 

 border: 0 none;

 float: left;

 height: 20px;

    padding: 5px 10px;

    width: 120px;

    -webkit-border-radius: 5px 5px 5px 5px; 

    -moz-border-radius: 5px 5px 5px 5px;

    border-radius: 5px 5px 5px 5px;

    -webkit-box-shadow: 0 2px 1px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;

    -moz-box-shadow: 0 2px 1px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;

    box-shadow: 0 2px 1px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;

    font-family: arial, helvetica, sans-serif; 

    font-size: 15px; 

    }

#searchb .go {

    -webkit-border-radius: 5px 5px 5px 5px; 

    -moz-border-radius: 5px 5px 5px 5px; 

    border-radius: 5px 5px 5px 5px;

    -webkit-box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;

    -moz-box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;

    box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;

    background: #00BFFF; /

    border: 0 none;

    font-size: 15px; 

   font-family: arial, helvetica, sans-serif;

    height: 30px;

    margin: 0 10px;

    padding-bottom: 3px;

    text-shadow: 0 1px rgba(255, 255, 255, 0.35);

    width: auto;

    cursor: pointer

 }

#searchb .go:hover {

         background: #00BFFF; 

}

</style>

<form id="searchb" action="ENDEREÇO COMPLETO DE SEU BLOG/search-results/" id="cse-search-box">

  <div>

    <input type="hidden" name="cx" value="ID DE SEU BLOG:yojsvasam2s" />

    <input type="hidden" name="cof" value="FORID:11" />

    <input type="hidden" name="ie" value="UTF-8" />

    <input type="text" name="q" size="31" placeholder="Pesquise no site"/>

    <input type="submit" name="sa" value="Buscar" class='go'/>

  </div>

</form>

Caixa de Pesquisa Com Efeito Transparente (MODELO 1)

Modelo 1:

/**************************CAIXA DE PESQUISA****************************/
<style>
#searchb {
float: left;
margin: 30px 0
<style>
#searchb {
float: left;
margin: 30px 0
}

/*CAIXA DE PESQUISA*/
#searchb input[type="text"], #searchb textarea {
background: none repeat scroll 0 0 #FFFFF0; /*cor de fundo onde digitamos a pesquisa*/
 border: 0 none;
 float: left;
 height: 20px;
    padding: 5px 10px;
    width: 120px;
    -webkit-border-radius: 5px 5px 5px 5px; /*grau de arredondamento da área onde digitamos*/
    -moz-border-radius: 5px 5px 5px 5px; /*grau de arredondamento da área onde digitamos*/
    border-radius: 5px 5px 5px 5px;/*grau de arredondamento da área onde digitamos*/
    -webkit-box-shadow: 0 1px 3px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset; /*não mexa*/
    -moz-box-shadow: 0 1px 3px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset; /*não mexa*/
    box-shadow: 0 1px 3px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset; /*não mexa*/
    font-family: arial, helvetica, sans-serif; /*tipo de fonte*/
    font-size: 15px; /*tamanho da fonte */
    }

/*BOTÃO BUSCAR*/
#searchb .go {
    -webkit-border-radius: 5px 5px 5px 5px;  /*grau de arredondamento do botão Buscar*/
    -moz-border-radius: 5px 5px 5px 5px; /*grau de arredondamento do botão Buscar*/
    border-radius: 5px 5px 5px 5px; /*grau de arredondamento do botão Buscar*/
    -webkit-box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;
    background: #fc0061; /*cor normal do botão*/
    border: 0 none;
    font-size: 15px; /*tamanho da fonte do botão Buscar*/
   font-family: arial, helvetica, sans-serif; /*tipo de fonte do botão Buscar*/
    height: 30px;
    margin: 0 10px;
    padding-bottom: 3px;
    text-shadow: 0 1px rgba(255, 255, 255, 0.35);
    width: auto;
    cursor: pointer
 }

/*BOTÃO BUSCAR EM HOVER*/
#searchb .go:hover {
         background: #ccc; /*cor do botão Buscar em estado hover*/
}
</style>

<br />
<form action="ENDEREÇO COMPLETO DE SEU BLOG/search-results/" id="cse-search-box">
<div>
<code><input name="cx" type="hidden" value="ID DE SEU BLOG:yojsvasam2s" />
    <input name="cof" type="hidden" value="FORID:11" />
    <input name="ie" type="hidden" value="UTF-8" />
    <input name="q" placeholder="Pesquise no site" size="31" type="text" />/*frase dentro da caixa de pesquisa*/
    <input class="go" name="sa" type="submit" value="Buscar" />/*frase dentro do botão buscar*/
  </code></div>
</form>