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

Question

Можно ли создать подобное текстовое поле только с чистым CSS?

Я сейчас (SASS Code):

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

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

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

Answer 3

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