CSS 입력 - 텍스트 필드

Question

순수한 CSS만으로 이와 같은 텍스트 필드를 만들 수 있습니까? 당신은 내가 여전히 배경 이미지를 사용하여 볼 수 있듯이, 그것은 약간의 구배로 교체

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 

입니다 :

나는이 점 (SASS 코드)에있어?

Answer 1

그라데이션 배경으로 사용해보십시오.

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