CSS text-indent: An Excellent Trick To Style Your HTML Form

written by aext on February 3, 2010 in CSS & HTML with 76 comments

You probably know what the text-indent property does in CSS. It’s a common CSS property allowing webmasters to indent paragraphs and hide text for image-based links. Text-indent does this great; however, it doesn’t just hide and indent text. It does more.

What’s text-indent?

Text-indent specifies the horizontal indent from the left side of the parent block element for the first line in the block. The indent is only applied at the beginning of the block but not after any intervening line-breaking elements. Keep in mind that this property allows negative values, and if used this way, the first line will be indented to the left.

The text-indent property is supported in all major browsers. However, Internet Explorer fails to support the inherit value for the text-indent (Yes, even IE8).

Hiding text using text-indent

Let’s say you have a logo and you want to display it in a link, so people can click on it. Only including the image of the logo has some drawbacks as far as SEO is concerned. Here’s a solution to handle this:

<style type="text/css">

h1 a {
    text-decoration: none;
    position: absolute; /* Depending on your placement */
    width: 260px;
    height: 100px;
    bottom: 0px; /* Depending on your placement */
    background: url(images/aext-logo.png) no-repeat left top;
    text-indent: -99999px;
}

</style>

<h1><a href="http://aext.net">AEXT.NET</a></h1>

With this, search engines will still recognize the text, but users will only see the logo because the text is indented to the left (99999px). See:

[inline]

[/inline]

This is not a new CSS technique and probably one of the most widely used techniques today. The way it works is very simple: the text in any block (not just links; such block-level elements, table cells, and inline blocks) will be pushed so far to the left (off screen) that its background image will remain the only thing the user see. The value of the text-indent property tells the browser at what point, relatively, the text should start.

An awesome trick using text-indent & forms

People mostly use text-indent to hide text like our example above. They often use the negative value for text-indent but forget to make use of its original intent: inset indentation. Here I’ll show you how to make a beautiful text field using text-indent.

Let’s use a simple search form as an example:

<form action="http://aext.net" id="search" method="get">
    <fieldset>
        <input type="text" id="searchtxt" name="s" value="">
    </fieldset>
</form>

Before the CSS, your text field looks something like this:

[inline]

[/inline]

First, let’s style it up and make it look a bit better with this CSS:

<style type="text/css">

fieldset {
    border: none;
}

label
{
    font-family: Helvetica,arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #9F0000;
}

input[type="text"]
{
    border:1px solid #CCCCCC;
    color:#516064;
    font-family: Helvetica,arial,sans-serif;
    font-size:16px;
    margin-bottom:20px;
    padding:8px;
    width:400px;
}
</style>

<form action="http://aext.net" id="search" method="get">
    <fieldset>
        <label for="searchtxt">Search: </label>
        <input type="text" id="searchtxt" name="s" value=""/>
    </fieldset>
</form>

The result?

[inline]

[/inline]

The label is now above the input field but it’d look amazing if we wrapped it with the input element and made the entered text follow after the label. We’d usually do it with the padding value, but today we’ll do it with text-indent.

Alright, now for the trick! Here it is:

<style type="text/css">

fieldset {
    border: none;

    /* trick */
    position: relative;
}

label
{
    font-family: Helvetica,arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #9F0000;

    /* trick */
    left:10px;
    top:9px;
    position:absolute;
}

input[type="text"]
{
    border:1px solid #CCCCCC;
    display: block;
    color:#516064;
    font-family: Helvetica,arial,sans-serif;
    font-size:16px;
    margin-bottom:20px;
    padding:8px;
    width:400px;

    /* trick */
    text-indent:75px;
}
</style>

<form action="http://aext.net" id="search" method="get">
    <fieldset>
        <label for="searchtxt">Search: </label>
        <!-- Remember to set mexlength for the input -->
        <input type="text" id="searchtxt" name="s" value=""
                                          maxlength="35" />
    </fieldset>
</form>

What you get after the trick:

[inline]

[/inline]

Although it looks great & works perfectly, you need to set the maxlength value for the input element to avoid text moving to left and getting in the way of the label. Here’s a sample of how you could use this technique in the “real world”:

[inline]

Choose an username for your portfolio:

[/inline]

Updated: It will display incorrectly in IE6 & IE7 because the css in this tutorial conflicts with the css in this WordPress theme. It works well in its own page. There is a bug in IE with the input element by using text-indent that I forgot. That’s “Peekaboo Bug”. It will make the text inside the text input display weird by floating to the left, but when refreshed, the bug is gone. Alright, edit something in your css text field:

<style type="text/css">

input[type="text"]
{   
    display:block;
    line-height: 100%;
}

</style>

So, what do you think? If you find any issues in this tutorial, please drop a line in comment section! Hope you like it and be sure to spread the love by sharing this article with the buttons below. Thanks!

tags:

Related Articles

CSS Absolute Positioning: Create A Fancy Link Block