Versatile form input borders
It’s been a long time, but I decided to share with you guys a versatile way of adding rounded edges to just about anything. This method works best with images with non-transparent backgrounds.
I mainly use this with text inputs and textareas. It can be used with almost anything, I think. And all it takes is one image, given that the image can be big, but most of the image is white, so it’s not that big of a file.
The image that I will be using will be this image
First the CSS:
<style type="text/css">
div.inputCont {
width: 200px;
}
div.stdInputTop {
background: transparent url(http://csswoes.com/wp-content/themes/csswoes/
images/std_input_background.png) no-repeat left top;
display: block;
padding-left: 6px;
min-width: 50px;
}
div.stdInputRight {
background: transparent url(http://csswoes.com/wp-content/themes/csswoes/
images/std_input_background.png) no-repeat right top;
display: block;
padding-top: 6px;
*padding-top: 5px;
margin-right: -6px;
_margin-right: 0px;
min-width: 50px;
}
div.stdInputBtm {
background: transparent url(http://csswoes.com/wp-content/themes/csswoes/
images/std_input_background.png) no-repeat right bottom;
display: block;
margin: 0 -6px 0 6px;
_margin: -8px 0 0 6px;
min-width: 50px;
height: 6px;
}
div.stdInputLeft {
background: transparent url(http://csswoes.com/wp-content/themes/csswoes/
images/std_input_background.png) no-repeat left bottom;
display: block;
min-width: 50px;
height: 6px;
}
input.textInput {
width: 194px;
border: 0px;
}
</style>
The HTML:
<div class="inputCont">
<div class="stdInputTop">
<div class="stdInputRight">
<input type="text" class="textInput" />
</div>
</div>
<div class="stdInputLeft"><div class="stdInputBtm"></div</div>
</div>
Explanation:
So basically you would adjust all the paddings and margins accordingly to fit the kind of borders that you’ve created. Also, the input element would need to be smaller than the container element “inputCont”, in this case, it’s 6px smaller.
The Result:
Like I mentioned earlier, this method can be used with almost anything like textareas. I would recommend to use this method if you know the element’s dimensions do not change, because the size is limited by the image’s size. If you’re just going for rounded corners, I suggest that you use the method I mentioned in a previous post.
Hope this helps!
RSS feed for comments on this post
