Код CSS для ввода-текстового поля

Question

Возможно ли создать текстовое поле, подобное этому только с помощью чистого CSS?

Я в этой точке (SASS код):

input[type="text"] 
    :background url(../../img/input_text_bg.png) repeat-x 
    :border-color light-grey 
    :width 210px 
    :height 30px 
    :-moz-border-radius 4px 
    :-webkit-border-radius 4px 
    :margin-top 20px 
    :margin-left 40px 
    :color $dark-grey 

, как вы можете видеть, я по-прежнему использовать фоновое изображение, является его заменить его с некоторым уклоном?

Answer 1

Попробуйте этот CSS для градиентного фона.

background-image: linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%); 
background-image: -o-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%); 
background-image: -moz-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%); 
background-image: -webkit-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%); 
background-image: -ms-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%); 

background-image: -webkit-gradient(
    linear, 
    right top, 
    right bottom, 
    color-stop(0.1, rgb(240,240,240)), 
    color-stop(0.58, rgb(255,255,255)) 
); 

Answer 2

Вы должны попробовать Webkits, это позволит вам окружить радиус границы и создать градиенты из диапазона цветов с использованием базового CSS/CSS3.

Answer 3

Вы можете использовать тени CSS3 и вставить. например,

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