Я хочу создать поле ввода, такое как Android Ice Cream Sandwich, только в HTML/CSS и без использования изображений.
Я застрял в создании этих небольших границ (изображение ниже). Было бы здорово, если бы кто-нибудь мог помочь.
Ответ 1
ИЗМЕНИТЬ
Я хотел бы включить комментарий 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;
}