输入文本字段的CSS代码

是否可以使用纯CSS创建一个像这样的文本字段？输入文本字段的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

，你可以看到我还是用一个背景图像，是它与一些梯度代替它呢？

来源

2012-01-23 kritop

yes你可以做到这一点，但你会对浏览器兼容性有一些限制..这是用CSS3完成的 – Murtaza

尝试此渐变背景的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)) 
);

来源

2012-01-23 12:29:45 Webking

您应该尝试使用Webkits，它将允许您围绕边框半径，并使用基本的CSS/CSS3从一系列颜色创建渐变。

来源

2012-01-23 12:27:36

您可以使用CSS3的box-shadow和inset。例如

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

来源

2012-01-23 12:30:48

输入文本字段的CSS代码

回答

相关问题