CODEWITHSUNDEEP
htmlcss
Timothy B.
Timothy B.

Reputation: 655

How to underline a field on a form except text in the cell

I've been asked to make a form that has labels in cells (not underlined) followed by an underlined area that indicates where someone is supposed to put information. I don't personally like this design approach, but it is what I've been asked to do.

Something like this:

First Name: ________
Last Name: ________
Street Address: ________

In other words, everything in the table cell is underlined except the label and the trailing space character.

The labels contain varying information and clearly will not align. However, all the underlines should right-align in their respective cells.

Here's a pen that hopefully illustrates what I'm trying to do. https://codepen.io/timmerbu/pen/pojMypE?editors=1100

html {
  font-size: 16px;
}

body {
  background: #9f9;
}

div {
  background: #fff;
  padding: 1rem;
  margin: auto;
  width: 200px;
}

table,
tr,
td {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}

table {
  width: 100%;
}

tr:nth-child(odd) {
  background: #fd4;
}

td {
  padding: 3px;
}
<div>
  <p>This is a test.</p>
  <table>
    <tbody>
      <tr>
        <td>Word: __________________</td>
      </tr>
      <tr>
        <td>Word word: ______________</td>
      </tr>
      <tr>
        <td>Word word word: _________</td>
      </tr>
      <tr>
        <td>Word word word word: ____</td>
      </tr>
    </tbody>
  </table>
  <p>End of test.</p>
</div>

Upvotes: 0

Views: 691

Answers (4)

Mister Jojo
Mister Jojo

Reputation: 22392

simply use use css after ?

.underlined:after {
  content: '______________'
}
  <p class="underlined">First Name: </p>
  <p class="underlined">Last Name: </p>
  <p class="underlined">Street Address: </p>

Upvotes: 1

Manish Dalal
Manish Dalal

Reputation: 1796

I think with the underlined field, you would like the user to enter the text too... I suggest the following HTML

You can use a <span> <td> <p> or any other suitable container tag, I am using <div>

 <div>
   First Name:
   <input type="text" style="border: none; border-bottom: solid 1px black; width: 200px" />

 </div>

You can put the styling in a CSS as well

UPDATED

Right align all the underlines

<table style="width: 300px">
    <tr>
      <td>
       <div style="width: 100%; float: left">
        <span style="background-color: white">First Name: </span>
        <hr style="margin-top: -4px;/>
       </div>
      </td>
    </tr>

    <tr>
      <td>
       <div style="width: 100%; float: left">
        <span style="background-color: white">Last Name: </span>
        <hr style="margin-top: -4px;/>
       </div>
      </td>
    </tr>

    <tr>
      <td>
       <div style="width: 100%; float: left">
        <span style="background-color: white">Age: </span>
        <hr style="margin-top: -4px;/>
       </div>
      </td>
    </tr>

    <tr>
      <td>
       <div style="width: 100%; float: left">
        <span style="background-color: white">Gender: </span>
        <hr style="margin-top: -4px;/>
       </div>
      </td>
    </tr>

    </table>

Upvotes: 1

rawnewdlz
rawnewdlz

Reputation: 1263

A little non-formal, but it works. Removing the underscore and adding it back with a CSS Pseudo class, while having the <span> for the text has a background and z-index that puts the underline behind it. You can change the underline placement by adjusting the top: -4px;.

html {
  font-size: 16px;
}

body {
  background: #9f9;
}

div {
  background: #fff;
  padding: 1rem;
  margin: auto;
  width: 200px;
}

table,
tr,
td {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}

table {
  width: 100%;
}

tr:nth-child(odd) {
  background: #fd4;
}

td {
  padding: 3px;
}

tbody td:after {
  border-bottom: 1px solid #f50909;
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  position: relative;
  top: -4px;
}

td span {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding-right: 5px;
  background: #FFF;
}

tr:nth-child(odd) span {
  background: #FD4;
}
<div>
  <p>This is a test.</p>
  <table>
    <tbody>
      <tr>
        <td><span>Word:</span></td>
      </tr>
      <tr>
        <td><span>Word word:</span></td>
      </tr>
      <tr>
        <td><span>Word word word:</span></td>
      </tr>
      <tr>
        <td><span>Word word word word:</span></td>
      </tr>
    </tbody>
  </table>
  <p>End of test.</p>
</div>

Upvotes: 2

Alyona Yavorska
Alyona Yavorska

Reputation: 579

You can try this code

<p style="width: 250px; display: table;">
  <span style="display: table-cell; width: 80px;">First Name:</span>
  <span style="display: table-cell; border-bottom: 1px solid black;"></span>
</p>

Upvotes: 1

Related Questions