طراحی textbox

[omidparkour]

سلام
من تو پی اس دی قالب رو طراحی کردم و برای تکست باکس سرچ شکل زیر رو طراحی کردم تو فتوشاپ:
http://upsara.com/images/rlo5223z56d3jrdte5mp.jpg
اما با html و css به شکل زیر تونستم درارمش با کد های زیر :
http://upsara.com/images/s36kuozqdxt9uxz5j3.jpg
چه کدهایی بنویسم تا مثل همونی که تو فتوشاپ طراحی کردم بشه؟؟
کد هایی که خودم نوشتم رو در زیر قرار دادم:


<form action="" method="get" id="form-search"><input type="text" id="search-txt"></form>

#search-txt
{
margin-top:5px;
margin-left:20px;
height:27px;
width:171px;
background-color:#87d9ff;
border-bottom-color:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:0px 0px -10px #666;
-moz-box-shadow:0px 0px -10px #666;
-webkit-box-shadow:0px 0px -10px #666;
border-bottom-style:solid;
direction:rtl;
}

[ab.ali]

دوست عزیز شما اول باید یک border:none بگذارید چون وقتی این صفت را نمی گذارید این textbox دچار تو رفتگی می شود!:کف:

[omidparkour]

:لبخندساده:
خب باید بردر داشته باشه

[2undercover]

http://codepen.io/2undercover/pen/cLKqE

[دانیال دزفولی]

اگه طرح لایه بازه به قسمت لایر برید و روی کپی سی اس اس کلیک کنید

بعدش کد css بهتون میده

[ab.ali]

دوست عزیز این بردر اصلی با بردر زیر تفائت داره یعنی شما می گی که برد نداشته باشه ولی بردر پایین داشته باشه منظورم این بود،شما همون چیزی که گفتم بذار به احتمال زیاد درست می شه!:لبخند: