Is there any way to style my textboxes and text areas with the same background image?

Id like to get an effect similar to soundcloud:

htt开发者_JS百科p://img215.imageshack.us/img215/9126/soundcloudinputs.jpg

For my textboxes and text areas but I just cant figure out how they have done it I dont really see how to make the background dynamic. Well I guess what I was hoping for was a tutorial that I could use, has anyone got any ideas?

They have achieved these through some very basic CSS3 properties. Here are some details.

1.They are changing the bottom-right-radius and top-left-radius to the curved look like this

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.Now they are giving among many other things a background-color for their input textboxes and textareas like this.

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

3.Lastly they are changing the background-color on :hover and :focus like this

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

So basically on hover or focus the background color is changed from #F8F8F8 to #f0f6fb
Are you looking for this?

Demo: http://jsfiddle.net/naveen/F54T2/

Here is little example using border images from this tutorial.

Thanks to css3 border images is everything scalable.

The title just has a background-color, so that's easy.

The textarea has a small background image that uses background-position: right bottom;.

For the curved borders you will have to use CSS3, which doesn't work in 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;

Like that, but you will need to pick which corners, and the radius of course. Google border radius for more.