Πλαίσια αναζήτησης

Μετάβαση στο blogger
Πλοηγηθείτε στην Διάταξη> Προσθήκη Gadget> Html / Javascript
Επικολλήστε τον κώδικα

<style type="text/css">.form-wrapper {width: 270px;padding: 8px;margin: 10px auto;overflow: hidden;border-width: 1px;border-style: solid;border-color: #dedede #bababa #aaa #bababa;-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;background-color: #f6f6f6;background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);background-image: linear-gradient(top, #f6f6f6, #eae8e8);}.form-wrapper #search {width: 180px;height: 20px;padding: 10px 5px;float: left;font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';border: 1px solid #ccc;-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}.form-wrapper #search:focus {outline: 0;border-color: #aaa;-moz-box-shadow: 0 1px 1px #bbb inset;-webkit-box-shadow: 0 1px 1px #bbb inset;box-shadow: 0 1px 1px #bbb inset;}.form-wrapper #search::-webkit-input-placeholder {color: #999;font-weight: normal;}.form-wrapper #search:-moz-placeholder {color: #999;font-weight: normal;}.form-wrapper #search:-ms-input-placeholder {color: #999;font-weight: normal;}.thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.form-wrapper #submit {float: right;border: 1px solid #00748f;height: 42px;width: 70px;padding: 0;cursor: pointer;font: bold 15px Arial, Helvetica;color: #fafafa;text-transform: uppercase;background-color: #0483a0;background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);background-image: -o-linear-gradient(top, #31b2c3, #0483a0);background-image: linear-gradient(top, #31b2c3, #0483a0);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;}.form-wrapper #submit:hover,.form-wrapper #submit:focus {background-color: #31b2c3;background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);background-image: -o-linear-gradient(top, #0483a0, #31b2c3);background-image: linear-gradient(top, #0483a0, #31b2c3);}.form-wrapper #submit:active {outline: 0;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;}.form-wrapper #submit::-moz-focus-inner {border: 0;}</style><form class="form-wrapper" action="/search" method="get">    <input id="search" name="q" type="text" placeholder="Type here" />    <input id="submit" type="submit" value="Search" /></form>

Style 2 

<style type="text/css">
#searchbox
   {
    background: #eaf8fc;
    background-image: -moz-linear-gradient(#fff, #d4e8ec);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
 
    -moz-border-radius: 35px;
    border-radius: 35px;
 
    border-width: 1px;
    border-style: solid;
    border-color: #c4d9df #a4c3ca #83afb7;        
    width: 270px;
    height: 35px;
    padding: 10px;
 
    overflow: hidden;
   }
     
        #search, #submit
        {
            float: left;
        }
     
        #search
        {
            padding: 5px 9px;
            height: 23px;
            width: 180px;
            border: 1px solid #a4c3ca;
            font: normal 13px 'trebuchet MS', arial, helvetica;
            background: #f1f1f1;
         
            -moz-border-radius: 50px 3px 3px 50px;
             border-radius: 50px 3px 3px 50px;
             -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
             -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);        

        }

  /* ----------------------- */

  #submit
  {
            background: #6cbb6b;
            background-image: -moz-linear-gradient(#95d788, #6cbb6b);
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
         
            -moz-border-radius: 3px 50px 50px 3px;
            border-radius: 3px 50px 50px 3px;
         
            border-width: 1px;
            border-style: solid;
            border-color: #7eba7c #578e57 #447d43;
         
             -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
             -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
             box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;  
   height: 35px;
   margin: 0 0 0 10px;
   padding: 0;
   width: 60px;
   cursor: pointer;
   font: bold 14px Arial, Helvetica;
   color: #23441e;

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

  #submit:hover
  {
            background: #95d788;
            background-image: -moz-linear-gradient(#6cbb6b, #95d788);
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
  }
  #submit:active
  {
            background: #95d788;
   outline: none;
       
             -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  }
  #submit::-moz-focus-inner
  {
    border: none;
  }

  /* ----------------------- */
     
        #search::-webkit-input-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }
     
        #search:-moz-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }
     
        #search.placeholder {
           color: #9c9c9c !important;
           font-style: italic;
        }
     
        #search:focus
        {
            border-color: #8badb4;
            background: #fff;
            outline: none;
        }
</style>
<form id="searchbox" action="/search" method="get">
    <input id="search" name="q" type="text" placeholder="Type here" />
    <input id="submit" type="submit" value="Search" />
</form> 

DEMO

Αποθηκεύστε και είστε έτοιμη.



ΠΗΓΗ