入力テキストフィールドの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; 
}