CSS: Как затенить такое поле?

Я пытаюсь стилизовать поле ввода текста. До сих пор я пытался использовать границы и изображения в качестве фона, но это не масштабируемое решение. Как я могу стилизовать поле ввода, как на изображении ниже?

введите здесь описание изображения


css formatting textinput
person Andrew    schedule 11.02.2013    source источник
comment
Это поможет вам   -  person Ron van der Heijden    schedule 11.02.2013
comment
Вы пробовали что-нибудь до сих пор? Провели какое-нибудь исследование? Посмотрите на использование градиента для границы вместе с внутренним box-shadow.   -  person Andy E    schedule 11.02.2013
comment
stackoverflow.com/questions/11361075 / -- Возможный дубликат   -  person Raphael Rafatpanah    schedule 11.02.2013

Ответы (2)


arrow_upward
4
arrow_downward

Используйте свойство CSS3 box-shadow. Пример:

input[type=text] {
    box-shadow: inset 2px 2px 2px 2px black;
}
person Morpheus    schedule 11.02.2013

arrow_upward
2
arrow_downward

Согласен с @Morpheus. Также вы можете использовать 2 тени одновременно:

input[type=text] {
    box-shadow: inset 0 2px 2px 2px #000, inset 0 -2px 2px 2px #fff;
}
person AnilkaBobo    schedule 11.02.2013