CSS中的类似Android ICS的输入字段

我想创建一个输入字段,如Android冰淇淋三明治只有HTML / CSS,不使用图像。
我坚持制作这些小边框(下图),如果有人可以提供帮助,那就太好了。

Android inpu字段

编辑

我想将owencm的评论列入人们对这个问题的绊脚石,因为我发现它非常优雅:

CSS

input.holo[type='text'] { /* You can set width to whatever you like */ width: 200px; font-family: "Roboto", "Droid Sans", sans-serif; font-size: 16px; margin: 0; padding: 8px 8px 6px 8px; position: relative; display: block; outline: none; border: none; background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat; background-size: 1px 6px, 1px 1px, 1px 6px; } input.holo[type='text']:hover, input.holo[type='text']:focus { background: bottom left linear-gradient(#0099cc, #0099cc) no-repeat, bottom center linear-gradient(#0099cc, #0099cc) repeat-x, bottom right linear-gradient(#0099cc, #0099cc) no-repeat; background-size: 1px 6px, 1px 1px, 1px 6px; } 

HTML

  

JSFiddle http://jsfiddle.net/QKm37/

原始方案