Question

我想获得类似于soundcloud的效果：

http://img215.imageshack.us/img215/9126/soundcloudinputs.jpg

对于我的文本框和文本区域，但我不知道他们是如何做到的，我真的没有看到如何使背景动态。嗯，我想我希望的是一个我可以使用的教程，有没有人有任何想法？

Answer 1

他们通过一些非常基本的CSS3属性实现了这些。以下是一些细节。

1.他们正在将bottom-right-radius和top-left-radius更改为弯曲的样子

input, 
textarea, 
select {
    -moz-box-sizing: border-box;
    border: 1px solid #CCCCCC;
    border-bottom-right-radius: 7px;
    border-top-left-radius: 7px;
    color: #333333;
    display: block;
    font-family: "Lucida Grande",Arial,Helvetica,Verdana,sans-serif;
    font-size: 12px;
    margin: 0 0 0.3em;
    padding: 3px 0 3px 3px;
}

2.现在，他们为background-color个input文本框和textarea提供了input[type="text"], textarea, input[type="search"], input[type="password"], input[type="email"], input[type="url"],input[type="search"] { background-attachment:scroll; background-clip:border-box; background-color:#F8F8F8; background-image:0; background-origin:padding-box; background-position:0 0; background-repeat:repeat-x; background-size:100% 4px; width:100%; }等许多其他内容。

background-color

3.最后，他们正在更改:hover和:focus上的input[type="text"]:focus, input[type="text"]:hover, input[type="text"].focus, textarea:focus,textarea:hover, textarea.focus, input[type="search"]:focus, input[type="search"]:hover, input[type="search"].focus, input[type="password"]:focus, input[type="password"]:hover, input[type="password"].focus, input[type="email"]:focus, input[type="email"]:hover, input[type="email"].focus, input[type="url"]:focus, input[type="url"]:hover, input[type="url"].focus, input[type="search"]:focus, input[type="search"]:hover, input[type="search"].focus { background-color:#f0f6fb; background:0 repeat-x scroll 0 0 #f0f6fb; -moz-background-size:100% 4px; -webkit-background-size:100% 4px; background-size:100% 4px; }

#F8F8F8

因此，基本上在悬停或对焦时，背景颜色从#f0f6fb更改为{{1}}
你在找这个吗？

演示：http://jsfiddle.net/naveen/F54T2/

Answer 2

以下example使用此tutorial的边框图片。

感谢css3边框图像，一切都是可扩展的。

Answer 3

标题只有一个background-color，所以很容易。

textarea有一个使用background-position: right bottom;的小背景图片。

对于弯曲的边框，您将不得不使用CSS3，这在IE中不起作用：

-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

就像这样，但是你需要选择哪个角落和当然的半径。谷歌边界半径更多。

有没有办法用相同的背景图像设置我的文本框和文本区域的样式？

3 个答案: