Creating borderless input fields

Here's a tip from Rich
Klein about how to make borderless input fields.

A good way to display data and allow input is to create an input field
in a table cell that is sized to the cell and is borderless. You can then
"underline" the field by setting the bottom border property of the cell.

If you are working with SQL Server, you can match the maxlength
attribute of the input field with the DefinedSize property of the SQL
table field.

Here’s how you might do it:

Read the recordset of the SQL table query. Let’s say the recordset is defined as rs1.

 <% ThisValue = rs1("ThisField")
    This Length = rs1("ThisField").DefinedSize %>

This sets the variables, ThisValue and ThisLength, with the values that you need.

Then, in the body of the page place the following style tags and the contents:

 <style>
    .under1 {border-bottom-width: 1px;}
        '"border-bottom: 1px;" may also work
    .text   {width: 100%; background-color: #008080; border-width: 0; color: #00FFFF;}
        'the background color attribute can be whatever matches your body background.
</style>

Then you would create your table, cells, and input fields. By setting
the class attribute, you can place these styles wherever you like.

 <table>
    <tr>
        <td class="under1">
            <input type="text" name="txtUserInput" class="text"
                value="<%=ThisValue%>" maxlength="<%=ThisLength%>">
        </td>
    </tr>
</table>

And so on ...

When this is done, the user input fields should all have underlines
and extend the entire cell width. The Input field character length is only
determined by the field size defined in SQL. The borders of the
input field and also the top, left and right sides of the cell
should not display. Since the background of the input field is the
same as the background, it should blend right in.

Comments

• Anonymous
  June 25, 2004
  why don't you set the border on the input field itself? border-width: 0 0 1px 0; would do it. Or at least use both class names on the input field, not everybody builds a table for each input.
• Anonymous
  June 25, 2004
  That's always possible. If you are not using a table, then that would be the way to go.
  If you are using a table, either way is good, but sometimes laying out the table cell helps to achieve a uniform look.
  How anyone does it is entirely at their own discretion.
• Anonymous
  April 17, 2006
  Thanks Lisa,  This is exactly what I was looking to do.  Simple instructions.  Outcome great!