فایل psd کادر جست و جو مطالب

امروز براتون یه کادر جست و جو در فتوشاپ را آماده کردم. کدنویسی شو هم گذاشتم.

                           دانلود فایل PSD           نمایش دمو

 

کد اچ تی ام ال:

<div>
   <input type="text" placeholder="enter a word...">
   <input type="submit" value="Search" >
</div>   

کد سی اس اس (css): 

 div{
        border:1px solid #e5e5e5;
        width:200px;
        margin:0 auto;
        display:block;
        overflow:hidden;
        line-height:1;
    }      
input[type="text"],input[type="submit"]{
            border:0;
          font-size:16px;
          margin:0;
          height: :100%;
      }
input[type="submit"]{
       width:30%;
       height:100%;
       padding: 5px 15px;
    }
input[type="text"]{
        width:65%;
        padding-right:5px;
    }