Question

Is it possible to create a textfield like this with just pure CSS?

I’m at this point (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

as you can see i still use a background-image, is it to replace it with some gradient?

Answer 1

Try this CSS for gradient background.

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))
);